Less css

532 views
458 views

Published on

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
532
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Less css

  1. 1. Agenda • Variables • Mixins • Nested rules
  2. 2. Variables • Declare a variable • @Nice-blue: #5B83AD; • @Fnord: "I am fnord.“ • Example • Ouputs: #header { color: #6c94be; }
  3. 3. 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.
  4. 4. Variables • Lazy loaded
  5. 5. Mixins • In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset
  6. 6. Mixins • Result
  7. 7. Nested rules • We have the following CSS
  8. 8. Nested rules • In LESS, we can also write it this way
  9. 9. Nested rules • Notice the & combinatory • It’s used when you want a nested selector to be concatenated to its parent selector
  10. 10. FAQ
  11. 11. Reference • http://lesscss.org/

×