stylus_基础语法（参数/function/运算符）

stylus跟less sass做的是同样的事情，之间有很多共同的地方，比如变量、计算的想法

归纳下stylus基础知识

参数

例如CSS3私有属性，每次都要输入很麻烦，可以采用传参数的形式来解决

styl

vender(n,arg)     //{}可以用来传参数
    -webkit-{n} arg
    -moz-{n} arg
    {n} arg
border-radius()   //一定要加括号
    vender('border-raidus',arguments)  //arguments默认参数
ul
    border-radius 2px  //只需要写border-radius的值即可 

编译后的css

ul {
  -webkit-border-raidus: 2px;
  -moz-border-raidus: 2px;
  border-raidus: 2px;
}

方法function

很强大的功能，CSS也可以用写函数的方式来做，同时还会有返回值

styl

add(a,b=a)  //只有一个参数也可以计算
    a = unit(a,px)  //把单位都变成px
    b = unit(b,px)  //把单位都变成px
    //a+b
    return a b a+b  //可以返回多个值，通过[0][1][2]调用
    
li 
    width add(14px)[0]
    height add(14px,20px)[1]
    font-size add(14px,20px)[2]

编译后的css

li {
  width: 14px;
  height: 20px;
  font-size: 34px;
}

运算符

加减乘除 逻辑运算等等;
亲测，不太靠谱，语法结构不严谨造就了各种各样的debug，我暂时不用