stylus - 函數與插值符號

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;
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章