Proč LESS a pro koho? Proč LESS používám? Nevolte podle syntaxe 4 tipy pro pokročilejší

1. Martin Michálek
@machal
LESS
#frontendisti
21. února 2014

2. LESS
– Pro koho?
– Proč LESS používám?
– Nevolte podle syntaxe
– 4 tipy pro pokročilejší

3. !
Proč LESS
a pro koho?

5. Designér
Programátor

6. Deklarativní
CSS, SQL…
Imperativní
PHP, JavaScript, Ruby, Python…

7. „Jak by to vyřešili
autoři CSS?”
„CSS je shit. Pojďme
to vyřešit jinak!”

8. !
Proč LESS
používám?

9. Dobře se
to učí!

10. <script src="less.js"></script>
<script>less.watch();</script>

12. Co třeba umí SASS/Stylus
a neumí LESS?
— @extend (už umí)
— if/else (mixin guards)
— cykly (recursive mixins)
— seamless mixins (mixins)
—…

13. Nevolte
podle
syntaxe

14. SASS whitespace peklo
/*
Font face
*/
!
!
@font-­‐face
font-­‐family: "ForoExtraBold"
src: url("../fonts/ForoXBol-­‐webfont.eot")
src: url('../fonts/ForoXBol-­‐webfont.eot?#iefix') format('embedded-­‐opentype'),
! url('../fonts/ForoXBol-­‐webfont.woff') format('woff'),
url('../fonts/ForoXBol-­‐webfont.ttf') format('truetype'),
url('../fonts/ForoXBol-­‐webfont.svg#ForoExtraBold') format('svg')

15. Sublime + Emmet + Hayaku

16. 4 tipy pro
pokročilejší

17. Vlastnosti @import
@import (less) "fancybox.css";

18. CSS guards

19. Mixiny jako funkce

20. BEM

21. Děkuji!
!
!
!
@machal
www.vzhurudolu.cz
facebook.com/VzhuruDolu
martin@vzhurudolu.cz