如何在SCSS中遍历Map动态生成栅格系统CSS类名？-css教程-PHP中文网

@each是唯一可靠方式，因map为键值对结构，@for/@while仅支持数值范围；必须用@each $key, $value in $map解构断点名与宽度等元数据，否则类名缺失关键样式。

如何在scss中遍历map动态生成栅格系统css类名？

SCSS map遍历生成栅格类名时，`@each` 是唯一可靠方式

直接用 @for 或 @while 无法遍历 Map —— 它们只支持数值范围。SCSS 的 Map 是键值对结构，必须用 @each $key, $value in $map 才能安全取到列数、断点名、宽度百分比等信息。

常见错误是把响应式断点写成数组（如 (sm, md, lg)），结果想用 @each $bp in $breakpoints 去套用栅格规则，但没绑定实际宽度值，生成的 .col-sm-6 类里连 flex-basis 都没有。

Map 必须包含完整元数据：断点名（sm）、最小宽度（576px）、栅格列数（12）、各列宽计算逻辑（如 calc(100% / 12 * $i)）
推荐结构：$grid-breakpoints: (sm: 576px, md: 768px, lg: 992px, xl: 1200px); 和 $grid-columns: 12; 分开定义，避免 Map 嵌套过深
若需为每个断点生成 .col-{bp}-{n}（如 .col-md-4），外层遍历断点，内层用 @for $i from 1 through $grid-columns 生成列数

生成 `.col-{bp}-{n}` 类时，`calc()` 宽度要防除零和小数精度问题

用 100% / $grid-columns * $i 算宽度看似合理，但 SCSS 编译时若 $grid-columns 是变量而非字面量，可能触发浮点误差（如 calc(100% / 12 * 5) 编译成 calc(100% * 0.4166666667)），某些旧版 Safari 会渲染异常。

更稳妥的是用整数比例字符串拼接，让浏览器运行时计算：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

@each $breakpoint, $width in $grid-breakpoints {
  @media (min-width: $width) {
    @for $i from 1 through $grid-columns {
      .col-#{$breakpoint}-#{$i} {
        flex: 0 0 calc(100% / #{$grid-columns} * #{$i});
        max-width: calc(100% / #{$grid-columns} * #{$i});
      }
    }
  }
}

务必用 #{$grid-columns} 而非 $grid-columns 直接参与 calc 字符串拼接，否则 SCSS 会提前计算并转成小数
不要写 width: percentage($i / $grid-columns) —— percentage() 对分数处理不稳定，且不支持响应式上下文
如果项目需支持 IE11，flex-basis 不能依赖 calc()，得 fallback 到 width + box-sizing: border-box

避免在 `@each` 中重复写 `@media` 导致 CSS 体积爆炸

每轮 @each 都包裹一层 @media，最终 CSS 会按断点 × 列数 × 属性数线性膨胀。比如 4 个断点 × 12 列 × 2 条样式 = 至少 96 行，还没算 offset/push/pull 类。

真正可控的做法是分层生成：先统一输出基础 .col-*（无断点），再用 @each 单独追加断点专属类（如 .col-sm-*），并用 @at-root 提升作用域：

@at-root {
  @each $breakpoint, $width in $grid-breakpoints {
    @media (min-width: $width) {
      @for $i from 1 through $grid-columns {
        .col-#{$breakpoint}-#{$i} {
          flex: 0 0 calc(100% / #{$grid-columns} * #{$i});
        }
      }
    }
  }
}

@at-root 防止嵌套层级过深导致选择器冗余（例如不会生成 .parent @media... .col-sm-6）
基础栅格类（.col-1 到 .col-12）建议始终存在，断点类仅覆盖响应行为，降低维护成本
若用 Dart Sass 1.33+，可配合 @use "sass:math" 做整除校验，避免 $i > $grid-columns 的无效输出

生成 offset/push/pull 类时，`margin-left` 计算容易漏掉负号或单位

写 .offset-sm-2 时，很多人直接复制 calc(100% / 12 * 2)，但 offset 应该是左空两列，即 margin-left: calc(100% / 12 * 2)；而 .pull-sm-2（向左拉）实际要负值：margin-left: calc(-100% / 12 * 2)。漏掉负号或写成 left: ... 就完全失效。