LESS summary
| Feature | Example |
|---|---|
| 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 Accessors | Define: #bundle { .button { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white } } .tab { ... } .citation { ... } } Use: #header a { color: orange; #bundle > .button; } |
| Scope | Variables 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%; } |
| XXX | XXXX |
| XXX | XXXX |
Comments