当需要聚合伪类 `:nth-*` 的时候,使用 `@for` 循环很有用。除了这些使用场景,如果_必须_迭代最好还是使用 `@each` 循环。
~~~
@for $i from 1 through 10 {
.foo:nth-of-type(#{$i}) {
border-color: hsl($i * 36, 50%, 50%);
}
}
~~~
要坚持一贯的传统,始终使用 `$i` 作为变量名,除非有非常好的原因,否则永远不要使用 `to` 关键字:而是始终使用 `through`。许多开发者甚至不知道 Sass 有这个变化;使用它可能会造成混乱。
最后,确保遵循规范以保持可读性:
* `each` 前添加空行;
* 除非下一行是右闭大括号(`}`),否则在所有右闭大括号(`}`)后面添加新行。
- 关于作者
- 贡献
- 关于Sass
- Ruby Sass Or LibSass
- Sass Or SCSS
- 其他预编译器
- 简介
- 为什么需要一个样式指南
- 免责声明
- 核心原则
- 语法格式
- 字符串
- 数字
- 颜色
- 列表
- Maps
- CSS规则集
- 声明顺序
- 选择器嵌套
- 命名约定
- 常量
- 命名空间
- 注释
- 标示注释
- 文档
- 结构
- 组件
- 7-1模式
- Shame文件
- 响应式设计和断点
- 命名断点
- 断点管理器
- 媒体查询用法
- 变量
- 作用域
- !default标识符
- !global标识符
- 多变量或maps
- 扩展
- 混合宏
- 基础
- 参数列表
- 混合宏和浏览器前缀
- 条件语句
- 循环
- Each
- For
- While
- 警告和错误
- 警告
- 错误
- 工具
- Compass
- 栅格系统
- SCSS-Lint
- 总结概要