@while 指令也需要 SassScript 表達(dá)式（像其他指令一樣），并且會(huì)生成不同的樣式塊，直到表達(dá)式值為 false 時(shí)停止循環(huán)。這個(gè)和 @for 指令很相似，只要 @while 后面的條件為 true 就會(huì)執(zhí)行。

這里有一個(gè) @while 指令的簡(jiǎn)單用例：

//SCSS
$types: 4;
$type-width: 20px;

@while $types > 0 {
    .while-#{$types} {
        width: $type-width + $types;
    }
    $types: $types - 1;
}

編譯出來的 CSS

.while-4 {
  width: 24px;
}

.while-3 {
  width: 23px;
}

.while-2 {
  width: 22px;
}

.while-1 {
  width: 21px;
}