循環(huán)

因為Sass提供了如 lists 和 maps 這樣的復雜數(shù)據(jù)結構，所以對于提供給開發(fā)者遍歷這些數(shù)據(jù)結構的能力也無需驚訝。

然而，循環(huán)的出現(xiàn)意味著存在本不可能出現(xiàn)在Sass中的復雜邏輯。在使用循環(huán)之前，務必確定這么做是有道理的，并且確認這么做可以解決問題。

Each

@each 循環(huán)絕對是Sass提供的三個循環(huán)方式中最常用的。它提供了一個簡潔的 API 來迭代列表或 map。

@each $theme in $themes {
  .section-#{$theme} {
    background-color: map-get($colors, $theme);
  }
}

當?shù)粋€ map 時，通常使用 $key 和 $value 作為變量名稱來確保一致性。

@each $key, $value in $map {
  .section-#{$key} {
    background-color: $value;
  }
}

同時遵守下述規(guī)則，確?？勺x性：

• each 前添加空行；
• 除非下一行是右閉大括號（}），否則在所有右閉大括號（}）后面添加新行。

For

當需要聚合偽類 :nth-* 的時候，使用 @for 循環(huán)很有用。除了這些使用場景，如果必須迭代最好還是使用 @each 循環(huán)。

@for $i from 1 through 10 {
  .foo:nth-of-type(#{$i}) {
    border-color: hsl($i * 36, 50%, 50%);
  }
}

要堅持一貫的傳統(tǒng)，始終使用 $i 作為變量名，除非有非常好的原因，否則永遠不要使用 to 關鍵字：而是始終使用 through。許多開發(fā)者甚至不知道 Sass 有這個變化；使用它可能會造成混亂。

最后，確保遵循規(guī)范以保持可讀性：

• each 前添加空行；
• 除非下一行是右閉大括號（}），否則在所有右閉大括號（}）后面添加新行。

While

絕對沒有必要在真實的 Sass 項目中使用 @while 循環(huán)——不要使用它。