Stylus - css preprocessor

sk. Michal Matuška @fireball_

SUPERKODÉR

www.superkoderi.cz

CSS Preprocessor Stylus

Mýty & fakta

Malá a neaktivní komunita

Určen pro programátory

Nepodporuje plug-iny

Není podporován frameworky

http://bit.ly/1d4OGXeBootstrap framework

http://bit.ly/1ffy6tvFoundation framework

Proč Stylus?

Nemá striktní pravidla

a  {     color:  #333;     &:hover  {         color:  #000;       }  }  !

a  {  color:  #333;  &:hover  {  color:  #000;  }}  !

a     color:  #333;     &:hover       color:  #000;

Stylus

Significant whitespace

Stylus

a     color  #333     &:hover       color  #000

Jednoduché volání mixin

@include  background-­‐image(linear-­‐gradient(top,  white,  black))  !

vs !

background-­‐image  linear-­‐gradient(top,  white,  black)

SASS vs Stylus

@extend

.message     padding  10px  !

.warning     @extend  .message     color  red  !

.message,  

.warning  {     padding:  10px;  }  .warning  {     color:  red;  }

Stylus

CSS

Business logika

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

Tipy & triky

$absoluteFull       position  absolute     top  0     right  0     bottom  0     left  0  

!

.overlay     @extend  $absoluteFull

Stylus

.overlay  {     position:  absolute;     top:  0;     right:  0;     bottom:  0;     left:  0;  }

CSS

.crossroad-­‐articles     &  +  &       margin-­‐top  50px

Stylus

.crossroad-­‐articles  +  .crossroad-­‐articles  {     margin-­‐top:  50px;  }

CSS

input     color  #666     &:hover,     /.is-­‐hovered       color  #000

Stylus

input  {     color:  #666;  }  !

input:hover,  .is-­‐hovered  {     color:  #000;  }

CSS

icon()     if  match(':(before|after)',  selector())       content  ''               display  inline-­‐block  !

.icon     &:before       icon()

Stylus

.icon:before  {     content:  '';     display:  inline-­‐block;  }

CSS

no-­‐wrap  =  nowrap  !

.name     white-­‐space  no-­‐wrap

Stylus

.name  {     white-­‐space:  nowrap;  }

CSS

.btn     background  rgba(black,  .5)

Stylus

.box  {     background:  rgba(0,0,0,0.5);  }

CSS

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

Stylus

.square  {     width:  30px;     height:  30px;  }  !

.rectangle  {     width:  30px;     height:  15px;  }

CSS

.icon-­‐add     absolute  top  50%  left  0     size  16px       margin-­‐top  (@height  /  -­‐2)

Stylus

.icon-­‐add  {     position:  absolute;     top:  50%;     left:  0;     width:  16px;     height:  16px;     margin-­‐top:  -­‐8px;  }

CSS

Děkuji za pozornosttwitter.com/fireball_

michal.matuska@superkoderi.cz

www.superkoderi.cz