stylus跟less sass做的是同样的事情，之间有很多共同的地方，比如变量、计算的想法
归纳下stylus基础知识
条件
因为有了条件，才受控制，才可以称的上是动态语言；
- if/else if/else
- unless(除非)
styl
box(x,y,margin-only = false)
if margin-only
margin x y
else
padding x y
p
box(5px, 10px, true)
编译后的css
p {
margin: 5px 10px;
}
循环迭代
可以循环取值，也可以循环赋值;
语法 for <val-name> [,<key-name>] in <expression>
styl
p
for bbbb in 2 3 4 5 6 7
foo bbbb
for a ,i in
编译后的css
p {
foo: 2;
foo: 3;
foo: 4;
foo: 5;
foo: 6;
foo: 7;
}
@import
支持导入其他stylus样式;
@media
@media工作原理和在常规CSS中一样，但是，要使用Stylus的块状符号。
styl
@media print
#header
#footer
display none
css
@media print {
#header,
#footer {
display: none;
}
}
@extend
继承
styl
.msg
padding 10px
margin 10px
border 1px solid #ccc
.warning
@extend .msg
color red
css
.msg,
.warning {
padding: 10px;
margin: 10px;
border: 1px solid #ccc;
}
.warning {
color: #f00;
}
