stylus -條件與迭代

Stylus

條件語句

     這沒什麼好說的,跟一般的語言一致,if表達式滿足(true)的時候執行後面語句塊,否則,繼續後面的else if或else.

flag = true
if flag == true
	div
		background red
else
	div
		background pink

div
	width 100px
	height 100px

迭代(循環)

     stylus允許你通過for/in對錶達式進行迭代。

for n in 1 2 3 4 5
	div:nth-child({n}) // 注意這裏使用了插值符號
		padding (n * 10)px

上述代碼編譯結果爲:

div:nth-child(1) {
  padding: 10px;
}
div:nth-child(2) {
  padding: 20px;
}
div:nth-child(3) {
  padding: 30px;
}
div:nth-child(4) {
  padding: 40px;
}
div:nth-child(5) {
  padding: 50px;
}

stylus函數同樣可以包含for循環。
求和:

sum(nums)
  sum = 0
  for n in nums
    sum += n

sum(1 2 3) // => 6
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章