stylus - css preprocessor
DESCRIPTION
1) Vyvrácení českých mýtů. 2) Proč stylus 3) Tipy & trikyTRANSCRIPT
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
