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.

CSS preprocesory

2,305 views

Published on

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

Published in: Technology
  • DOWNLOAD FULL. BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL. BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

CSS preprocesory

  1. 1. Martin Michálek @machal CSS preprocesory WordCamp Prague 22. února 2014
  2. 2. Program 1. 2. 3. 4. 5. Jak to funguje? Co to umí? Přínos pro mě? Debugování Který vybrat?
  3. 3. Zkuste si to! LESS2CSS, SassMeister, Try Stylus
  4. 4. Jak to funguje?
  5. 5. Kompilace v GUI Prepros, Koala, CodeKit…
  6. 6. Grunt.JS Preprocesory, sprity, concat, Autoprefixer…
  7. 7. Příkazová řádka npm  install  less   lessc  style.less  style.css npm  install  stylus   stylus  -­‐-­‐watch  style.styl  >  style.css
  8. 8. V prohlížeči <script  src="less.js"></script>   <script>less.watch();</script>
  9. 9. Co to umí?
  10. 10. Proměnné @brand-­‐primary:  #428bca;   ! @import  "bootstrap/bootstrap"; $medium-­‐up:  "only  screen  and  (min-­‐width:  600px)";   ! @media  #{$medium-­‐up}  {      //  …   }
  11. 11. Mixiny CSS .ellipsis  {     text-­‐overflow:  ellipsis;     overflow:  hidden;     white-­‐space:  nowrap;   }   .ellipsis  {     text-­‐overflow:  ellipsis;     overflow:  hidden;     white-­‐space:  nowrap;   }   ! ! .el  {     .ellipsis;     margin-­‐bottom:  1.5em;   } .el  {     text-­‐overflow:  ellipsis;     overflow:  hidden;     white-­‐space:  nowrap;     margin-­‐bottom:  1.5em;   }
  12. 12. 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);   } CSS .el  {      -­‐webkit-­‐transition:  all  100ms  ease-­‐out;      -­‐moz-­‐transition:  all  100ms  ease-­‐out;        -­‐o-­‐transition:  all  100ms  ease-­‐out;        transition:  all  100ms  ease-­‐out;     }
  13. 13. Extend CSS .pel  {      color:  white;   }   ! .mel  {      @extend  .pel;      background:  black;   } .pel,  .mel  {      color:  white;   }   ! .mel  {      background:  black;   }
  14. 14. Zanořování a selektor rodiče CSS .nav  {      margin:  0;            .nav-­‐item  {          display:  inline-­‐block;      }   .nav  {      margin:  0;   }   ! ! .nav  .nav-­‐item  {      display:  inline-­‐block;   }      &.nav-­‐hidden  {          display:  none;      }   } .nav.nav-­‐hidden  {      display:  none;   } !
  15. 15. Zanořování Media Queries .nav  {      width:  25%;   !    @media  only  screen  and  (min-­‐width:  768px)  {          width:  100%;      }   } CSS .nav  {      width:  25%;   }   ! @media  only  screen  and  (min-­‐width:  768px)  {      .nav  {          width:  100%;      }   }
  16. 16. Matematika CSS width:  66.326530612%;  /*  650  /  980  *  100  */  
  17. 17. Matematika CSS width:  66.326530612%;  /*  650  /  980  *  100  */   width:  percentage(650  /  @container-­‐width);   //  !  width:  66.326530612%;
  18. 18. Podmínky CSS $type:  monster;   ! .el  {      @if  $type  ==  ocean  {          color:  blue;      }  @else  if  $type  ==  monster  {          color:  green;      }  @else  {          color:  black;      }   } .el  {          color:  green;   }
  19. 19. Cykly icons  =  facebook,  twitter,  google-­‐plus;   ! for  icon  in  icons  {      .{icon}-­‐icon  {          background-­‐image:  url('/images/'+icon+'-­‐icon.png');      }   } CSS .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");   }  
  20. 20. 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";
  21. 21. Ekosystém Bourbon, LESSHat, nib, Compass, Susy…
  22. 22. Debugování
  23. 23. Kde jsou moje čísla řádků? index.css
  24. 24. Firebug FireLESS, FireSASS, FireStylus
  25. 25. Source Maps layout.less /*#  sourceMappingURL=/test/less-­‐source-­‐maps/css/index.css.map  */
  26. 26. Přínos pro mě?
  27. 27. Kvalita kódu • Spravovatelnost kódu • Organizace codebase ! Rychlost vývoje • Rychlejší psaní a změny • Hotové knihovny • Vlastní knihovny
  28. 28. Který vybrat?
  29. 29. Porovnání Designér → programátor ★☆☆ ★★☆ ★★★ Komunita ★★★ ★★☆ ★☆☆ Knihovny, frameworky ★★☆ ★★★ ★☆☆
  30. 30. 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
  31. 31. Díky! martin@vzhurudolu.cz twitter.com/machal www.vzhurudolu.cz

×