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.

Stylus - css preprocessor

1,874 views

Published on

1) Vyvrácení českých mýtů.
2) Proč stylus
3) Tipy & triky

Published in: Technology

Stylus - css preprocessor

  1. 1. SUPERKODÉR sk. Michal Matuška @fireball_ www.superkoderi.cz
  2. 2. CSS Preprocessor Stylus
  3. 3. Mýty & fakta
  4. 4. Malá a neaktivní komunita Určen pro programátory Nepodporuje plug-iny Není podporován frameworky
  5. 5. Bootstrap framework http://bit.ly/1d4OGXe Foundation framework http://bit.ly/1ffy6tv
  6. 6. Proč Stylus?
  7. 7. Nemá striktní pravidla
  8. 8. a  {     color:  #333;     &:hover  {         color:  #000;       }   }   ! a  {  color:  #333;  &:hover  {  color:   #000;  }}   ! a     color:  #333;     &:hover       color:  #000; Stylus
  9. 9. Significant whitespace
  10. 10. Stylus a     color  #333     &:hover       color  #000
  11. 11. Jednoduché volání mixin
  12. 12. SASS vs Stylus @include  background-­‐image(linear-­‐ gradient(top,  white,  black))   ! vs ! background-­‐image  linear-­‐gradient(top,   white,  black)
  13. 13. @extend
  14. 14. .message     padding  10px   Stylus ! .warning     @extend  .message     color  red   ! .message,   .warning  {     padding:  10px;   }   .warning  {     color:  red;   } CSS
  15. 15. Business logika
  16. 16. Stylus $cols  =  1  2  3  4  5   ! for  $col  in  $cols     $parts  =  1..$col     for  $part  in  $parts       if  $col  is  1  or  $part  is  not  $col         .col-­‐{$part}-­‐{$col}           width  unit(100  /  $col  *  $part,  '%')  
  17. 17. Tipy & triky
  18. 18. Stylus $absoluteFull       position  absolute     top  0     right  0     bottom  0     left  0   ! .overlay     @extend  $absoluteFull
  19. 19. CSS .overlay  {     position:  absolute;     top:  0;     right:  0;     bottom:  0;     left:  0;   }
  20. 20. Stylus .crossroad-­‐articles     &  +  &       margin-­‐top  50px
  21. 21. CSS .crossroad-­‐articles  +  .crossroad-­‐ articles  {     margin-­‐top:  50px;   }
  22. 22. Stylus input     color  #666     &:hover,     /.is-­‐hovered       color  #000
  23. 23. CSS input  {     color:  #666;   }   ! input:hover,   .is-­‐hovered  {     color:  #000;   }
  24. 24. Stylus icon()     if  match(':(before|after)',  selector())       content  ''               display  inline-­‐block   ! .icon     &:before       icon()
  25. 25. CSS .icon:before  {     content:  '';     display:  inline-­‐block;   }
  26. 26. Stylus no-­‐wrap  =  nowrap   ! .name     white-­‐space  no-­‐wrap
  27. 27. CSS .name  {     white-­‐space:  nowrap;   }
  28. 28. Stylus .btn     background  rgba(black,  .5)
  29. 29. CSS .box  {     background:  rgba(0,0,0,0.5);   }
  30. 30. Stylus size()     if  length(arguments)  ==  1       width  arguments[0]       height  arguments[0]     else       width  arguments[0]       height  arguments[1]   ! .square     size  30px   ! .rectangle     size  30px  15px
  31. 31. CSS .square  {     width:  30px;     height:  30px;   }   ! .rectangle  {     width:  30px;     height:  15px;   }
  32. 32. Stylus .icon-­‐add     absolute  top  50%  left  0     size  16px       margin-­‐top  (@height  /  -­‐2)
  33. 33. CSS .icon-­‐add  {     position:  absolute;     top:  50%;     left:  0;     width:  16px;     height:  16px;     margin-­‐top:  -­‐8px;   }
  34. 34. Děkuji za pozornost twitter.com/fireball_ www.superkoderi.cz michal.matuska@superkoderi.cz

×