Proč LESS?

LESS

21. února 2014#frontendisti

Martin Michálek @machal

LESS

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

!

Proč LESS a pro koho?

Designér

Programátor

Deklarativní

ImperativníPHP, JavaScript, Ruby, Python…

CSS, SQL…

„Jak by to vyřešili autoři CSS?”

„CSS je shit. Pojďme to vyřešit jinak!”

!

Proč LESS používám?

Dobře se to učí!

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

Co třeba umí SASS/Stylus a neumí LESS?

— @extend (už umí)

— if/else (mixin guards)

— cykly (recursive mixins)

— seamless mixins (mixins)

— …

Nevolte podle

syntaxe

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')

!

!

Sublime + Emmet + Hayaku

4 tipy pro pokročilejší

Vlastnosti @import

@import  (less)  "fancybox.css";

CSS guards

Mixiny jako funkce

BEM

Děkuji! !!!

@machal www.vzhurudolu.cz

facebook.com/VzhuruDolu martin@vzhurudolu.cz