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;
}