SASS通过Mixin遍历Map无法编译CSS问题求助

你遇到的问题本质是**@content的作用域隔离机制**：当你在mixin中使用@content时，这段代码并不是在mixin内部的循环作用域里执行的，而是会被“拉回”到调用mixin的地方（也就是.body选择器的作用域）执行。

原来的代码里，你在循环里给$color赋值，但这个$color是循环块内的局部变量，@content所在的外部作用域根本访问不到它，所以最终编译时$color还是初始的null，自然出不来正确的样式。

SASS从3.3版本开始支持给@content传递参数，这完美解决了作用域隔离的问题。我们可以把循环里的颜色值作为参数传给@content，在调用mixin时接收这个参数即可。

修正后的代码 #

首先定义颜色映射和mixin：

$brand_col: ( def: blue, mus: red, ser: yellow );

@mixin branding {
  @each $brand, $col in $brand_col {
    &.#{$brand} {
      // 把当前循环的颜色值作为参数传给@content
      @content($col);
    }
  }
}

然后调用mixin时，通过using语法接收参数（SASS 4.0+推荐写法，更清晰）：

.body {
  @include branding using ($color) {
    background: $color;
  }
}

编译后的CSS结果 #

这样就能得到你预期的输出了：

.body.def {
  background: blue;
}
.body.mus {
  background: red;
}
.body.ser {
  background: yellow;
}

兼容旧版本SASS的写法 #

如果你的项目使用的是较老的SASS版本（不支持using语法），可以用位置参数$1来接收传递的值：

.body {
  @include branding {
    background: $1; // $1对应@content传递的第一个参数
  }
}

这种通过@content传递参数的方式，还能让你的mixin更灵活——不仅可以设置background，还能传递颜色给其他样式属性，比如：

.body {
  @include branding using ($color) {
    background: $color;
    border-color: darken($color, 10%);
  }
}

这样编译出来的每个品牌类都会有对应的背景色和加深的边框色，实用性拉满~

内容的提问来源于stack exchange，提问作者Ralf