循环

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