其余參數(Rest Params)

其余參數

Stylus支持name...形式的其余參數。這些參數可以消化傳遞給混寫或函數的參數們。這在處理瀏覽器私有屬性，如-moz或-webkit的時候很管用。

下面這個例子中，所有的參數們(1px, 2px, ...)都被一個args參數給簡單消化了：

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

我們想指定特定的參數，如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

生成為：

#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變量可以實現(xiàn)表達式的精確傳遞，包括逗號等等。這可以彌補args...參數的一些不足，見下面的例子：

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

逗號給忽略了。我們現(xiàn)在使用arguments重新定義這個混合書寫。

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