`@each`?循環絕對是Sass提供的三個循環方式中最常用的。它提供了一個簡潔的 API 來迭代列表或 map。
~~~
@each $theme in $themes {
.section-#{$theme} {
background-color: map-get($colors, $theme);
}
}
~~~
當迭代一個 map 時,通常使用?`$key`?和?`$value`?作為變量名稱來確保一致性。
~~~
@each $key, $value in $map {
.section-#{$key} {
background-color: $value;
}
}
~~~
同時遵守下述規則,確保可讀性:
* `each`?前添加空行;
* 除非下一行是右閉大括號(`}`),否則在所有右閉大括號(`}`)后面添加新行。
- 關于作者
- 貢獻
- 關于Sass
- Ruby Sass Or LibSass
- Sass Or SCSS
- 其他預編譯器
- 簡介
- 為什么需要一個樣式指南
- 免責聲明
- 核心原則
- 語法格式
- 字符串
- 數字
- 顏色
- 列表
- Maps
- CSS規則集
- 聲明順序
- 選擇器嵌套
- 命名約定
- 常量
- 命名空間
- 注釋
- 標示注釋
- 文檔
- 結構
- 組件
- 7-1模式
- Shame文件
- 響應式設計和斷點
- 命名斷點
- 斷點管理器
- 媒體查詢用法
- 變量
- 作用域
- !default標識符
- !global標識符
- 多變量或maps
- 擴展
- 混合宏
- 基礎
- 參數列表
- 混合宏和瀏覽器前綴
- 條件語句
- 循環
- Each
- For
- While
- 警告和錯誤
- 警告
- 錯誤
- 工具
- Compass
- 柵格系統
- SCSS-Lint
- 總結概要