0
Agenda
• Variables
• Mixins
• Nested rules
Variables
• Declare a variable

• @Nice-blue: #5B83AD;
• @Fnord: "I am fnord.“

• Example

• Ouputs: #header { color: #6c9...
Variables
• When defining a variable twice, the last definition of the variable is used, searching from the
current scope ...
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 sele...
FAQ
Reference
• http://lesscss.org/
Less css
Upcoming SlideShare
Loading in...5
×

Less css

355

Published on

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

No Downloads
Views
Total Views
355
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×