Post on 15-May-2015
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/