Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Proč LESS?

1,235 views

Published on

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

Published in: Technology
  • Be the first to comment

Proč LESS?

  1. 1. Martin Michálek @machal LESS #frontendisti 21. února 2014
  2. 2. LESS – Pro koho? – Proč LESS používám? – Nevolte podle syntaxe – 4 tipy pro pokročilejší
  3. 3. ! Proč LESS 
 a pro koho?
  4. 4. Designér Programátor
  5. 5. Deklarativní CSS, SQL… Imperativní PHP, JavaScript, Ruby, Python…
  6. 6. „Jak by to vyřešili 
 autoři CSS?” „CSS je shit. Pojďme to vyřešit jinak!”
  7. 7. ! Proč LESS 
 používám?
  8. 8. Dobře se to učí!
  9. 9. <script  src="less.js"></script>   <script>less.watch();</script>
  10. 10. Co třeba umí SASS/Stylus a neumí LESS? — @extend (už umí) — if/else (mixin guards) — cykly (recursive mixins) — seamless mixins (mixins) —…
  11. 11. Nevolte podle syntaxe
  12. 12. 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')
  13. 13. Sublime + Emmet + Hayaku
  14. 14. 4 tipy pro pokročilejší
  15. 15. Vlastnosti @import @import  (less)  "fancybox.css";
  16. 16. CSS guards
  17. 17. Mixiny jako funkce
  18. 18. BEM
  19. 19. Děkuji! ! ! ! @machal www.vzhurudolu.cz facebook.com/VzhuruDolu martin@vzhurudolu.cz 


×