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，我暫時不用