CSS preprocesory

22. února 2014WordCamp Prague

Martin Michálek @machal

Program

1. Jak to funguje? 2. Co to umí? 3. Přínos pro mě? 4. Debugování 5. Který vybrat?

Zkuste si to!LESS2CSS, SassMeister, Try Stylus

Jak to funguje?

Kompilace v GUIPrepros, Koala, CodeKit…

Grunt.JSPreprocesory, sprity, concat, Autoprefixer…

Příkazová řádka

npm  install  less  lessc  style.less  style.css

npm  install  stylus  stylus  -­‐-­‐watch  style.styl  >  style.css

V prohlížeči

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

Co to umí?

Proměnné

@brand-­‐primary:  #428bca;  !@import  "bootstrap/bootstrap";

$medium-­‐up:  "only  screen  and  (min-­‐width:  600px)";  !@media  #{$medium-­‐up}  {      //  …  }

Mixiny

.ellipsis  {     text-­‐overflow:  ellipsis;     overflow:  hidden;     white-­‐space:  nowrap;  }  !.el  {     .ellipsis;     margin-­‐bottom:  1.5em;  }

.ellipsis  {     text-­‐overflow:  ellipsis;     overflow:  hidden;     white-­‐space:  nowrap;  }  !.el  {     text-­‐overflow:  ellipsis;     overflow:  hidden;     white-­‐space:  nowrap;     margin-­‐bottom:  1.5em;  }

CSS

Parametrické mixiny@mixin  transition($par)  {      -­‐webkit-­‐transition:  $par;    //  Chrome  1-­‐25,  Safari  3.2+        -­‐moz-­‐transition:  $par;    //  Firefox  4-­‐15        -­‐o-­‐transition:  $par;    //  Opera  10.50–12.00      transition:  $par;    //  Chrome  26,  Firefox  16+,  IE  10+,  Opera  12.10+  }  !.el  {      @include  transition(all  100ms  ease-­‐out);  }

.el  {      -­‐webkit-­‐transition:  all  100ms  ease-­‐out;      -­‐moz-­‐transition:  all  100ms  ease-­‐out;        -­‐o-­‐transition:  all  100ms  ease-­‐out;        transition:  all  100ms  ease-­‐out;    }

CSS

Extend

.pel  {      color:  white;  }  !.mel  {      @extend  .pel;      background:  black;  }

.pel,  .mel  {      color:  white;  }  !.mel  {      background:  black;  }

CSS

Zanořování a selektor rodiče

.nav  {      margin:  0;            .nav-­‐item  {          display:  inline-­‐block;      }  !    &.nav-­‐hidden  {          display:  none;      }  }

.nav  {      margin:  0;  }  !.nav  .nav-­‐item  {      display:  inline-­‐block;  }  !.nav.nav-­‐hidden  {      display:  none;  }

CSS

Zanořování Media Queries

.nav  {      width:  25%;  !    @media  only  screen  and  (min-­‐width:  768px)  {          width:  100%;      }  }

.nav  {      width:  25%;  }  !@media  only  screen  and  (min-­‐width:  768px)  {      .nav  {          width:  100%;      }  }

CSS

Matematika

width:  66.326530612%;  /*  650  /  980  *  100  */  CSS

Matematika

width:  66.326530612%;  /*  650  /  980  *  100  */  

width:  percentage(650  /  @container-­‐width);  

//  !  width:  66.326530612%;

CSS

Podmínky

$type:  monster;  !.el  {      @if  $type  ==  ocean  {          color:  blue;      }  @else  if  $type  ==  monster  {          color:  green;      }  @else  {          color:  black;      }  }

CSS

.el  {          color:  green;  }

Cykly

icons  =  facebook,  twitter,  google-­‐plus;  !for  icon  in  icons  {      .{icon}-­‐icon  {          background-­‐image:  url('/images/'+icon+'-­‐icon.png');      }  }

.facebook-­‐icon  {      background-­‐image:  url("/images/facebook-­‐icon.png");  }  .twitter-­‐icon  {      background-­‐image:  url("/images/twitter-­‐icon.png");  }  .google-­‐plus-­‐icon  {      background-­‐image:  url("/images/google-­‐plus-­‐icon.png");  }  

CSS

Import

//  Knihovny  @import  "lib/bourbon";  @import  “lib/foundation";  @import  (less)  “lib/fancybox.css”;  !//  Zakladna,  layout  @import  "core/vd-­‐fonts";  @import  "core/vd-­‐base";  @import  "core/vd-­‐layout";  !//  UI  moduly  @import  "modules/vd-­‐ad";  @import  "modules/vd-­‐box";  @import  "modules/vd-­‐alert";  @import  "modules/vd-­‐article";

Ekosystém

Bourbon, LESSHat, nib, Compass, Susy…

Debugování

Kde jsou moje čísla řádků?

index.css

FirebugFireLESS, FireSASS, FireStylus

Source Maps

/*#  sourceMappingURL=/test/less-­‐source-­‐maps/css/index.css.map  */

layout.less

Přínos pro mě?

Kvalita kódu • Spravovatelnost kódu • Organizace codebase !

Rychlost vývoje • Rychlejší psaní a změny • Hotové knihovny • Vlastní knihovny

Který vybrat?

Porovnání

Designér → programátor ★☆☆ ★★☆ ★★★

Komunita ★★★ ★★☆ ★☆☆

Knihovny, frameworky ★★☆ ★★★ ★☆☆

Případové studie

• Designér? • Programátor? • Snadné učení? • Technická pokročilost? • Velikost komunity? • Bootstrap? • Foundation?

LESS SASS, Stylus LESS Stylus LESS LESS, SASS SASS

Díky!

martin@vzhurudolu.cz twitter.com/machal www.vzhurudolu.cz