Stylus
函數
Stylus強大之處就在於其內置的語言函數定義,並且可以自主的返回值。
borders(arg)
-webkit-border-radius arg
-moz-border-radius arg
border-radius arg
div
borders(1px solid red)
上述代碼編譯結果爲:
div {
-webkit-border-radius: 1px solid #f00;
-moz-border-radius: 1px solid #f00;
border-radius: 1px solid #f00;
}
通過stylus的函數,來實現a + b
的一個效果。
爲什麼調用時要用( )把plus函數括起來,如果不括會是這個樣子 20 px,中間會有一個空格,括起來就可以了。如果後面沒有別的屬性,是可以不用括的。
plus(a, b)
a + b
div
width 100px
height 100px
border (plus(10,10)px) solid red
上述代碼編譯結果爲:
div {
width: 100px;
height: 100px;
border: 20px solid #f00;
}
默認參數
如果b不傳參數,則會將a的值賦給b,當然也可以默認爲其它值。
add(a, b = a)
a + b
函數多個返回值
stylus的函數可以返回多個值,使用當前值對應的小標來拿取。
size()
15px 20px
size()[1] solid red // => 20px
變量賦多個值
size = 100px 200px
size[0] // => 100px
在函數內拿取實參賦值給形參的值。
size(a, b)
a b
size(10px, 20px) // => 10px 20px 會同時拿到兩個值
size(10px, 20px)[1] // => 這樣是錯誤的
爲避免歧義,我們可以使用括號,或是return關鍵字。
size(a, b)
return a b
size(10px, 20px)[1] // => 20px
插值符號
Stylus支持通過使用{}字符包圍表達式來插入值,其會變成標識符的一部分。例如,-webkit-{‘border’ + ‘-radius’}等同於-webkit-border-radius。
borders(prop, args)
-webkit-{prop} args
-moz-{prop} args
{prop} args
div
borders(border-radius, 10px solid red)
上述代碼編譯結果爲:
div {
-webkit-border-radius: 10px solid #f00;
-moz-border-radius: 10px solid #f00;
border-radius: 10px solid #f00;
}