Stylus 注釋

2023-09-11 15:52 更新

其余參數(shù)(Rest Params)

其余參數(shù)

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

下面這個(gè)例子中,所有的參數(shù)們(1px, 2px, ...)都被一個(gè)args參數(shù)給簡(jiǎn)單消化了:

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

我們想指定特定的參數(shù),如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;
}
參數(shù)們

arguments變量可以實(shí)現(xiàn)表達(dá)式的精確傳遞,包括逗號(hào)等等。這可以彌補(bǔ)args...參數(shù)的一些不足,見(jiàn)下面的例子:

box-shadow(args...)
  -webkit-box-shadow args
  -moz-box-shadow args
  box-shadow args

#login
  box-shadow #ddd 1px 1px, #eee 2px 2px 

結(jié)果并非稱心如意:

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

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

box-shadow()
  -webkit-box-shadow arguments
  -moz-box-shadow arguments
  box-shadow arguments

body
  box-shadow #ddd 1px 1px, #eee 2px 2px

于是,一下子雨過(guò)天晴了:

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


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)