LESS CSSBryan Lin 2013/12/27

Agenda• Variables

• Mixins

• Nested rules

Variables• Declare a variable

• @Nice-blue: #5B83AD;

• @Fnord: "I am fnord.“

• Example

• Ouputs: #header { color: #6c94be; }

Variables• When defining a variable twice, the last definition of the variable is used,

searching from the current scope upwards. This is similar to css itself where the last property inside a definition is used to determine the value.

Variables• Lazy loaded

Mixins• In LESS, it is possible to include a bunch of properties from one ruleset into

another ruleset

Mixins• Result

Nested rules• We have the following CSS

Nested rules• In LESS, we can also write it this way

Nested rules• Notice the & combinatory

• It’s used when you want a nested selector to be concatenated to its parent selector

FAQ

Reference• http://lesscss.org/