LESS CSS Pre-processor

{LESS}CSS Pre-processor

● Introduction● Variables● Operations● Functions● Extend● Mixins● Loops● Merge● Compile LESS to CSS● TODO

Outline

● What is LESS?○ Less is a CSS pre-processor, meaning that it

extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themeable and extendible.

● Usage Development Mode

Introduction

LESS<link rel="stylesheet/less" type="text/css" href="styles.less" />

Library<script src="less.js" type="text/javascript"></script>

● Color

Variables (1/7)

// Variables@link-color: #0000ff;@btn-color: white;

// Usagea { color: @link-color;}button { color: @btn-color; background: @link-color;}

LESS

// Outputsa { color: #0000ff;}button { color: #ffffff; background: #0000ff;}

CSS (outputs)

● URLs

Variables (2/7)

// Variables@images: "../img";

// Usagebutton { background: url("@{images}/button_blue.png");}

LESS

// Outputsbutton { background: url("../img/button_blue.png");}

CSS (outputs)

● Selectors

Variables (3/7)

// Variables@mySelector: banner;

// Usage.@{mySelector} { font-weight: bold; line-height: 40px; margin: 0 auto;}

LESS

// Outputs.banner { font-weight: bold; line-height: 40px; margin: 0 auto;}

CSS (outputs)

● Properties

Variables (4/7)

// Variable@property: color;

// Usage.widget { @{property}: #0ee; background-@{property}: #999;}

LESS

// Outputs.widget {color: #0ee;background-color: #999;}

CSS (outputs)

● Variable Names

Variables (5/7)

// Variable@fnord: "I am fnord.";@var: "fnord";

// Usage.text {

content: @@var;}

LESS

// Outputs.text { content: "I am fnord.";}

CSS (outputs)

● Lazy Loading○ Variables are lazy loaded and do not have to be

declared before being used.

Variables (6/7)

.lazy-eval { width: @var;}@var: @a;@a: 9%;

LESS

.lazy-eval-scope { width: 9%;}

CSS (outputs)

● @import○ Import styles from other style sheets

Variables (7/7)

@import "foo"; // foo.less is imported@import "foo.less"; // foo.less is imported@import "foo.php"; // foo.php imported as a less file@import "foo.css"; // statement left in place, as-is

Operations

@base: 5%; // Outputs@filler: @base * 2; // 10%@other: @base + @filler; // 15%@base-color: #222; //@padding: 5px; //

color: #888 / 4; // #222222background-color: @base-color + #111; // #333333height: 100% / 2 + @filler; // 60%padding: @padding + 5; // 10px

// Question???margin: @base + @padding; // what is it?

● http://lesscss.org/functions/

Functions

@base: #0000ff;@width: 0.5;

.class { width: percentage(@width); // 50% color: greyscale(@base, 5%); // #838383 background-color: lighten(@base, 25%); // #8080ff}

// Output.class { width: 50%; color: #838383; background-color: #8080ff;}

● Example 1

Extend (1/2)

nav ul { &:extend(.inline); background: blue;}.inline { color: red;}

LESS

nav ul { background: blue;}.inline, nav ul { color: red;}

CSS (outputs)

● Example 2

Extend (2/2)

nav ul:extend(.inline) { background: blue;}.inline { color: red;}

LESS

nav ul { background: blue;}.inline, nav ul { color: red;}

CSS (outputs)

● Mixin● Parametric Mixins● Mixins as Functions● Mixin Guards

Mixin Outline

● "mix-in" properties from existing styles

Mixins (1/3)

.a { color: red;}#b { background: blue;}.mixin-class { .a();}.mixin-id { #b();}

LESS

.a { color: red;}#b { background: blue;}.mixin-class { color: red;}.mixin-id { background: blue;}

CSS (outputs)

● Not outputting the mixin

Mixins (2/3)

.my-mixin { color: black;}.my-other-mixin() { background: white;}.class { .my-mixin; .my-other-mixin;}

.my-mixin { color: black;}.class { color: black; background: white;}

CSS (outputs)LESS

● Selectors in mixins

Mixins (3/3)

.my-hover-mixin() { &:hover { border: 1px solid red; } color: white;}button { .my-hover-mixin(); background: blue;}

button { color: white; background: blue;}button:hover { border: 1px solid red;}

CSS (outputs)LESS

● How to pass arguments to mixins

Parametric Mixins (1/3)

.border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;}.button { .border-radius(6px);}

LESS

CSS (outputs).button { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;}

CSS (outputs)

● How to set default parameters to mixins

Parametric Mixins (2/3)

.border-radius(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;}.button { .border-radius();}

LESS

CSS (outputs).button { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}

CSS (outputs)

● Mixins with Multiple Parameters

Parametric Mixins (3/3)

.mixin(@color; @padding) { color: @color; padding: @padding;}.some .selector div { .mixin(blue, 2px);}

LESS

CSS (outputs).some .selector div { color: blue; padding: 2px;}

CSS (outputs)

● Return variables

Mixins as Functions (1/3)

.mixin() { @width: 100%; @height: 200px;}.caller { .mixin(); width: @width; height: @height;}

.caller { width: 100%; height: 200px;}

CSS (outputs)LESS

● Return mixin defined in mixin

Mixins as Functions (2/3)

.unlock(@value) { .doSomething() { padding: @value; }}#namespace { .unlock(5px); .doSomething();}

#namespace { padding: 5px;}

CSS (outputs)LESS

● Overridden global variables

Mixins as Functions (3/3)

@size: 10px;.mixin() { @size: 5px; @inMixin: 20px;}.class { margin: @size @inMixin; .mixin();}.other-class { margin: @size;}

.class { margin: 5px 20px;}.other-class { margin: 10px;}

CSS (outputs)LESS

● Conditional mixins

Mixin Guards (1/3)

.mixin(@a) when (lightness(@a) >= 50%) { background-color: black;}.mixin(@a) when (lightness(@a) < 50%) { background-color: white;}.mixin(@a) { color: @a; }

.class2 { .mixin(#ddd) }

.class2 { .mixin(#555) }

.class1 { background-color: black; color: #ddd;}.class2 { background-color: white; color: #555;}

CSS (outputs)LESS

● Conditional mixins○ Additionally, the default function may be used

to make a mixin match depending on other mixing matches, and you may use it to create "conditional mixins" similar to else or default statements (of if and case structures respectively):

Mixin Guards (2/3)

.mixin (@a) when (@a > 0) { ... }

.mixin (@a) when (default()) { ... } // apply when @a <= 0

● Guard comparison operators○ > : greater than○ >= : greater than or equal to○ = : equal to○ =< : little than or equal to○ < : little than

● Guard logical operators○ and : and logical operator○ , : or logical operator

● Type checking functions○ iscolor(), isnumber, isstring, iskeyword, isurl,

ispixel, ispercentage, isem, isunit

Mixin Guards (3/3)

● Example 1

Loops (1/2)

.loop(@counter) when (@counter > 0) { .loop((@counter - 1)); width: (10px * @counter);}div { .loop(5);}

div { width: 10px; width: 20px; width: 30px; width: 40px; width: 50px;}

LESS CSS (outputs)

● Example 2

Loops (2/2)

.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) { .column-@{i} {

width: (@i * 100% / @n); } .generate-columns(@n, (@i + 1));}

LESS

.column-1 { width: 25%; }

.column-2 { width: 50%; }

.column-3 { width: 75%; }

.column-4 { width: 100%; }

CSS (outputs)

● Comma

Merge (1/2)

.mixin() { box-shadow+: inset 0 0 10px #555;}.myclass { .mixin(); box-shadow+: 0 0 20px black;}

LESS

.myclass { box-shadow: inset 0 0 10px #555, 0 0 20px black;}

CSS (outputs)

● Space

Merge (2/2)

.mixin() { transform+_: scale(2);}.myclass { .mixin(); transform+_: rotate(15deg);}

LESS

.myclass { transform: scale(2) rotate(15deg);}

CSS (outputs)

● Online Compiler○ http://winless.org/online-less-compiler

● GUIs Compiler○ WinLess○ Crunch!○ Mixture○ …

● For more, go to○ http://lesscss.org/usage/#guis-for-less

Compile LESS to CSS

● Using LESS define a button using mixin and can be changed the button style from color blue to any giving color

TODO

Default Button Mouse Over Button

● http://lesscss.org/features/● http://css-tricks.com/snippets/javascript/lighten-darken-color/● https://stackoverflow.com/questions/21821947/calculate-difference-

between-color-hexadecimal/21831435#21831435● https://github.com/less/less.js/archive/master.zip●

References