LESS

yuri goytacaz

Transcript

1. yuri goytacaz LESS
2. human does LESS machine does more
3. LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.
4. LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.
5. LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.
6. LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.
7. LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.
8. variables mixins operations functions
9. variables mixins operations functions
10. variables mixins operations functions
11. // LESS @color: #4D926F; #header { color: @color; } h2 { color: @color; } /* CSS */ #header { color: #4D926F; } h2 { color: #4D926F; } variables
12. // LESS .rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } #header { .rounded-corners; } #footer { .rounded-corners(10px); } /* CSS */ #header { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #footer { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } mixins
13. como compilar?
14. como compilar? mac http://incident57.com/less http://yuri.gs/lessapp win http://wearekiss.com/simpless http://yuri.gs/simpless
15. http://lesscss.org http://yuri.gs/less