迴圈
@while
指令將迴圈遍歷程式碼塊,直到指定的條件變為 false。在下面的示例中,此迴圈將一直執行到 $font-size <= 18
,同時將 $font-size
的值遞增 2。
$font-size: 12;
@while $font-size <= 18 {
.font-size-#{$font-size} {
font-size: ($font-size * 1px);
}
$font-size: $font-size + 2;
}
輸出上面的程式碼
.font-size-12 {
font-size: 12px;
}
.font-size-14 {
font-size: 14px;
}
.font-size-16 {
font-size: 16px;
}
.font-size-18 {
font-size: 18px;
}