@while循環

@while 指令也需要SassScript 表達式（像其他指令一樣），並且會生成不同的樣式塊，直到表達式值為false 時停止循環。這個和@for 指令很相似，只要@while 後面的條件為true 就會執行。

這裡有一個@while 指令的簡單用例：

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