This document discusses variables, mixins, and nested rules in LESS. Variables allow values like colors and strings to be declared and reused. Mixins allow properties from one ruleset to be included in another for reuse. Nested rules in LESS use the & combinator to concatenate selectors, allowing nesting of CSS rules for improved organization.

2. Agenda
• Variables
• Mixins
• Nested rules

3. Variables
• Declare a variable
• @Nice-blue: #5B83AD;
• @Fnord: "I am fnord.“
• Example
• Ouputs: #header { color: #6c94be; }

4. 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.

5. Variables
• Lazy loaded

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

7. Mixins
• Result

8. Nested rules
• We have the following CSS

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

10. Nested rules
• Notice the & combinatory
• It’s used when you want a nested selector to be concatenated to its parent selector

11. FAQ

12. Reference
• http://lesscss.org/