LESS Notes

less.txt

IDENT = [a-z0-9_#@.&:*\[\]=""]
COMMENT = /* ... */
COMMENT = // …
VARIABLE = @{...}

GT
COMMA
SEMICOLON

interpret vars in vars = @@

- lazy eval
- last assignment wins


## Extend

- &:extend(...) 
- &:extend(.a, .b)
- &:extend(.myclass all)
- .myclass:extend(.foo)
- extend selector must be exact
- extend is restricted within a @media
- no duplication detection
- use case: base class
- use case: reduce css size


## Mixin

- include the class: .a or .a()
- parens at end of mixin decl prevent output.
- mixins can hold properties & selectors
- nested mixins: #outer > .inner, #outer.inner
- !important after mixin marks all mixin properties as !important.

- parametric mixins: .border-radius(@radius)
- with default: .border-radius(@radius: 5px)
- multiple params: separate by comma or semicolon
- named params: @arg: 1, @arg: 2
- @arguments variable automatically passes through all args.
- varadic args: …
- @rest... represents all args after named args.
- pattern matching: @mixin(value; @arg) { ... }
- pattern matching: by arg count: @mixin(@a), @mixin(@a, @b)
- variables can be returned
- rulesets can be passed as an arg


## Imports

- can be anywhere
- extensions matter: css treated as css, everything else is less, no ext appends .less
- options: reference, inline, less, css, once, multiple
- "reference": doesn't output styles unless mixed in.
- "inline": outputs given CSS file as-is.
- "less": imports as less regardless of ext.
- "css": imports as css regardless of ext.
- "once": only include once.
- "multiple": include multiple times.


## Mixin Guards

- adds "when" keyword to evaluate conditional expression.
- comparison operators: >, >=, =, =<, <
- only "true" is truthy.
- tokens: and, not, comma (or)
- type checking functions: iscolor, isnumber, isstring, iskeyword, isurl
- unit functions: ispixel, ispercentage, isem, isunit


## CSS Guards

- conditions can be added to regular css selectors


## Loops

- recursively calling mixins with guards.


## Merge

- multiple properties can be combine with a comma (+) or a space (+_).


## Parent selectors

- & represents the parent selector when nested.
- multiple parents will generate all permutations
- can change selector order: .foo &