2.12.14

LESS summary

LESS summary



FeatureExample
Variable@nice-blue: #5B83AD; @light-blue: @nice-blue + #111;

#header { color: @light-blue; }
Nesting#header { color: black; } #header .navigation { font-size: 12px; } #header .logo { width: 300px; }

Into LESS:

#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; } }
Parametric Mixins.border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; }

or with default value:

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


#header { .border-radius(4px); } .button { .border-radius(6px); }
Operations@base: 5%; @filler: @base * 2; @other: @base + @filler;
Namespaces and AccessorsDefine:

#bundle { .button { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white } } .tab { ... } .citation { ... } }

Use:

#header a { color: orange; #bundle > .button; }
ScopeVariables and mixins are first looked for locally, and if they aren't found, the compiler will look in the parent scope.

@var: red; #page { @var: white; #header { color: @var; // white } }
Properties@property: color; .widget { @{property}: #0ee; background-@{property}: #999; }
Loops.generate-columns(4); .generate-columns(@n, @i: 1) when (@i =< @n) { .column-@{i} { width: (@i * 100% / @n); } .generate-columns(@n, (@i + 1)); }

Output:

.column-1 { width: 25%; } .column-2 { width: 50%; } .column-3 { width: 75%; } .column-4 { width: 100%; }
XXXXXXX
XXXXXXX