Skip to main content

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

Comments

Popular posts from this blog

Best freeware - XML editor

As a software developer, I open XML files all the time. I a heavy commercial XML editor. But nothing can compare to a small, thin and free XML editor like 'foxe'. A great feature is has is the alignment of long XML strings to readable XML format (Shift-F8). It help lot of times when the XML file was generated by some tool and was not readable. Homepage: http://www.firstobject.com/dn_editor.htm

Jenkins error: groovy.lang.MissingPropertyException

I tried to run groovy build step and got below error. This post will describe how I solved the problem. Caught: groovy.lang.MissingPropertyException: No such property: hudson for class: script

SSL in pictures

Here is my summary on SSL (or as I like to call it 'SSL for dummies')