直接用@for生成.col-1到.col-12更可靠，因能确保数值连续、单位统一、逻辑固化；改栅格基数只需调一个变量，而手动维护易漏改、错值、单位不一致，且@for必须用through而非to以防漏掉.col-12。
为什么直接用 @for 生成 .col-1 到 .col-12 比手写更可靠
手动维护 12 个类名的宽度规则，容易漏改、错值、单位不一致；而 @for $i from 1 through 12 能确保数值连续、单位统一、逻辑固化。改栅格基数（比如从 12 切到 24）只需调一个变量，不用重算所有百分比。
常见错误是写成 @for $i from 1 to 12，结果只生成 .col-1 到 .col-11，漏掉关键的 .col-12——大屏布局会无声失效，DevTools 里也看不出异常。
- 必须用
through，不是to：闭区间语义明确，后续扩展列数时不易出错 -
percentage($i / 12.0)里加.0是为了防整除截断；1 / 12在 Sass 中得0，percentage(0)输出就是0% - 别混用
percentage()和calc()：前者是编译期静态计算，后者是运行时计算，失去 Sass 的优势
grid-column 场景下怎么安全生成 span 类
Flex/Grid 布局中，.col-3 不再代表“占 25% 宽度”，而是“占 3 栅格线”，此时真正该用的是 grid-column: span 3。但 @for 插值不能直接写 span #{$i}，因为 span 是关键字，Sass 会把它当字符串字面量处理。
漏掉 unquote() 会导致编译出 grid-column: "span 3"（带引号），浏览器直接忽略该声明。
- 正确写法：
grid-column: unquote("span #{$i}") -
grid-column不支持百分比值，所以 Grid 场景下别用percentage() -
grid-column-start的合法范围是1到$grid-max-columns + 1，超出不会报错，但布局彻底失效
响应式断点类怎么避免选择器爆炸
想给每个断点（sm、md、lg）都配一套 .col-sm-1….col-lg-12？三层嵌套会生成 36 个类，但实际被用到的可能不到 1/5。未使用的类留在 CSS 里，既增体积，又干扰 DevTools 查找。
- 结构上必须外层
@each $name, $width in $breakpoints，内层@for $i from 1 through 12；反着来会重复声明全部断点，CSS 体积暴增 - 只生成高频组合：用
@if $i == 12 or $i % 3 == 0 or $i 控制生成范围，跳过5、7等低频列数 -
@media规则必须在同一个.scss文件里完成编译；跨文件引入断点 map 后再嵌套，@media会丢失包裹，输出裸规则
多语言 RTL 布局里哪些方向控制不能交给 CSS 逻辑属性
别用 margin-inline-start 替代方向判断——它在 Safari 14 以下和某些旧版 WebView 中行为异常，且无法优雅降级。同理，float: left 也不能靠 @supports 自动切换，因为旧引擎根本不识别逻辑属性，也不会 fallback。
- 必须用变量控制：
float: if($lang-dir == rtl, right, left)，否则 RTL 下整个布局错位 -
@mixin rtl-margin($val)里要显式写margin-left和margin-right，而不是依赖margin-inline - 打包时别为每种语言单独编译一份 CSS（如
app-ltr.css+app-rtl.css），更别把所有规则塞进一个文件靠@if包裹——那样会产出大量未使用的 CSS
真正麻烦的不是写对一行 @for，而是确认每个生成类是否真被 HTML 引用；一旦漏掉 unquote() 或写错 through 边界，问题往往静默存在，直到上线后某台旧 iPad 上布局突然崩塌。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
