@for

@for 規則，寫作方式為 @for <變數> from <表達式> to <表達式> { ... } 或 @for <變數> from <表達式> through <表達式> { ... }，從一個數字（第一個表達式的結果）往上或往下數到另一個數字（第二個表達式的結果），並針對之間的每個數字評估一個程式碼區塊。路徑上的每個數字都會被指派給指定的變數名稱。如果使用 to，則排除最終數字；如果使用 through，則包含最終數字。

  SCSS

  Sass

  CSS

       程式碼遊樂場SCSS 語法$base-color: #036;

@for $i from 1 through 3 {
  ul:nth-child(3n + #{$i}) {
    background-color: lighten($base-color, $i * 5%);
  }
}

       程式碼遊樂場Sass 語法$base-color: #036

@for $i from 1 through 3
  ul:nth-child(3n + #{$i})
    background-color: lighten($base-color, $i * 5%)

CSS 輸出ul:nth-child(3n+1) {
  background-color: rgb(0, 63.75, 127.5);
}

ul:nth-child(3n+2) {
  background-color: rgb(0, 76.5, 153);
}

ul:nth-child(3n+3) {
  background-color: rgb(0, 89.25, 178.5);
}