Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Stylus - css preprocessor

1.876 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie

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

×