使用SCSS的@each批量创建@mixin遇到错误求助

SCSS的@mixin名称必须是合法的CSS标识符，直接用中文或未正确插值的变量拼接都会触发「Expected Identifier」错误，以下是修正后的实现方案：

1. 定义规范的映射变量 #

映射键使用英文（符合标识符规则的字符），避免中文：

// 字体尺寸：键为尺寸标识，值为具体字号
$font-sizes: (
  xs: 12px,
  sm: 14px,
  base: 16px,
  lg: 18px,
  xl: 20px,
  // 补充你需要的剩余尺寸，凑够对应144个组合的数量
);

// 行高：与字号标识一一对应
$line-heights: (
  xs: 1.2,
  sm: 1.4,
  base: 1.5,
  lg: 1.6,
  xl: 1.7,
);

// 字重：键为字重标识，值为具体字重值
$font-weights: (
  light: 300,
  normal: 400,
  medium: 500,
  bold: 700,
  black: 900,
  // 补充你需要的剩余字重
);

2. 嵌套@each循环批量生成@mixin #

用#{}插值语法将变量值拼接为合法的@mixin名称：

@each $size-name, $size-value in $font-sizes {
  @each $weight-name, $weight-value in $font-weights {
    // 拼接规则：text-尺寸标识-字重标识
    @mixin text-#{$size-name}-#{$weight-name} {
      font-size: $size-value;
      line-height: map-get($line-heights, $size-name);
      font-weight: $weight-value;
    }
  }
}

3. 调用生成的@mixin #

现在可正常调用自动生成的mixin：

.page-title {
  @include text-xl-bold;
}

.body-content {
  @include text-base-normal;
}

错误原因说明 #

你之前的问题主要出在两点：

• @mixin名称使用了中文，SCSS对中文标识符的兼容性差，解析时会判定为非法字符，抛出「Expected Identifier」错误。
• 拼接变量到mixin名称时未使用#{}插值语法，直接写变量名会被当作标识符的固定部分，而非变量解析，导致语法错误。

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