Stylus剩餘參數
Stylus 支援以 name... 形式呈現的剩餘參數。這些參數會使用傳遞給混合或函式的剩餘參數。當使用（例如）隱式函式呼叫支援來套用供應商前綴（例如 -webkit 或 -moz）時，這會很有用。
在以下範例中，我們消耗所有傳遞的參數，並簡單地將它們套用至多個屬性。
box-shadow(args...)
-webkit-box-shadow args
-moz-box-shadow args
box-shadow args
#login
box-shadow 1px 2px 5px #eee
box-shadow(args...)
-webkit-box-shadow args
-moz-box-shadow args
box-shadow args
#login
box-shadow 1px 2px 5px #eee
產生
#login {
-webkit-box-shadow: 1px 2px 5px #eee;
-moz-box-shadow: 1px 2px 5px #eee;
box-shadow: 1px 2px 5px #eee;
}
#login {
-webkit-box-shadow: 1px 2px 5px #eee;
-moz-box-shadow: 1px 2px 5px #eee;
box-shadow: 1px 2px 5px #eee;
}
如果我們想要偷看特定參數（例如 x-offset），我們可以簡單地使用 args[0]。或者，我們可能希望重新定義混合
box-shadow(offset-x, args...)
got-offset-x offset-x
-webkit-box-shadow offset-x args
-moz-box-shadow offset-x args
box-shadow offset-x args
#login
box-shadow 1px 2px 5px #eee
box-shadow(offset-x, args...)
got-offset-x offset-x
-webkit-box-shadow offset-x args
-moz-box-shadow offset-x args
box-shadow offset-x args
#login
box-shadow 1px 2px 5px #eee
產生
#login {
got-offset-x: 1px;
-webkit-box-shadow: 1px 2px 5px #eee;
-moz-box-shadow: 1px 2px 5px #eee;
box-shadow: 1px 2px 5px #eee;
}
#login {
got-offset-x: 1px;
-webkit-box-shadow: 1px 2px 5px #eee;
-moz-box-shadow: 1px 2px 5px #eee;
box-shadow: 1px 2px 5px #eee;
}
參數
arguments 變數會注入至混合和函式主體，包含傳遞的確切表達式。這有幾個原因很有用（特別是供應商支援），因為你可以取得確切的表達式、逗號等等。
例如，如果我們使用 rest 參數，逗號會被消耗（因為它是表達式分隔符號）
box-shadow(args...)
-webkit-box-shadow args
-moz-box-shadow args
box-shadow args
#login
box-shadow #ddd 1px 1px, #eee 2px 2px
box-shadow(args...)
-webkit-box-shadow args
-moz-box-shadow args
box-shadow args
#login
box-shadow #ddd 1px 1px, #eee 2px 2px
產生不需要的結果
#login {
-webkit-box-shadow: #ddd 1px 1px #eee 2px 2px;
-moz-box-shadow: #ddd 1px 1px #eee 2px 2px;
box-shadow: #ddd 1px 1px #eee 2px 2px;
}
#login {
-webkit-box-shadow: #ddd 1px 1px #eee 2px 2px;
-moz-box-shadow: #ddd 1px 1px #eee 2px 2px;
box-shadow: #ddd 1px 1px #eee 2px 2px;
}
讓我們使用 arguments 重新定義混合
box-shadow()
-webkit-box-shadow arguments
-moz-box-shadow arguments
box-shadow arguments
body
box-shadow #ddd 1px 1px, #eee 2px 2px
box-shadow()
-webkit-box-shadow arguments
-moz-box-shadow arguments
box-shadow arguments
body
box-shadow #ddd 1px 1px, #eee 2px 2px
現在，產生需要的結果
body {
-webkit-box-shadow: #ddd 1px 1px, #eee 2px 2px;
-moz-box-shadow: #ddd 1px 1px, #eee 2px 2px;
box-shadow: #ddd 1px 1px, #eee 2px 2px;
}
body {
-webkit-box-shadow: #ddd 1px 1px, #eee 2px 2px;
-moz-box-shadow: #ddd 1px 1px, #eee 2px 2px;
box-shadow: #ddd 1px 1px, #eee 2px 2px;
}