SCSS @while指令

admin發表於2018-08-15
CSSWhile

@while是一個迴圈指令，其後跟著一個表示式，如果表示式的返回值為false，則停止迴圈。

程式碼例項如下: 

[Scss] 純文字檢視 複製程式碼
$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

編譯後的css程式碼如下: 

[CSS] 純文字檢視 複製程式碼
.item-6 {
  width: 12em; 
}
.item-4 {
  width: 8em; 
}
.item-2 {
  width: 4em; 
}

相關文章