迴圈

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