Sass混合宏编译失败：如何生成指定格式的margin样式类？

你的思路完全没问题——通过混合宏+循环批量生成margin类是非常高效的写法，只是Sass不支持直接用$space-#{$size}这种动态拼接变量名的方式来解析变量，这就是编译失败的原因。下面给你两种可行的解决方案：

方案一：使用Sass Maps（推荐，更易维护） #

用Map来统一管理空间尺寸，遍历的时候直接取对应的数值，语法清晰且符合现代Sass的最佳实践：

// 把空间尺寸存入Map，方便批量调用和后续维护
$space-map: (
  s: 0.8rem,
  m: 1rem,
  l: 2.4rem
);

@mixin margins($direction) {
  @each $size, $value in $space-map {
    .m#{$direction}-#{$size} {
      margin-#{$direction}: $value;
    }
  }
}

// 调用混合宏生成需要的类
@include margins(r); // 输出 .mr-s, .mr-m, .mr-l
@include margins(l); // 输出 .ml-s, .ml-m, .ml-l

方案二：兼容原有变量定义（用动态变量获取） #

如果你不想修改原来的独立变量定义，可以用Sass的variable-exists()和get-variable()函数来动态获取变量值：

$space-s: 0.8rem;
$space-m: 1rem;
$space-l: 2.4rem;
$margin-sizes: s m l;

@mixin margins($direction) {
  @each $size in $margin-sizes {
    // 拼接变量名字符串
    $var-name: "space-#{$size}";
    // 先检查变量是否存在，避免编译错误
    @if variable-exists($var-name) {
      .m#{$direction}-#{$size} {
        margin-#{$direction}: get-variable($var-name);
      }
    }
  }
}

// 调用混合宏
@include margins(r);
@include margins(l);

两种方案都能生成你想要的CSS类，推荐优先用方案一——Map的方式把所有尺寸集中管理，后期新增或修改尺寸只需要修改Map，代码更整洁，也更符合模块化的思想。

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