Sass循环拼接%报Expected identifier错误 求原因及最优解决方案

%是Sass的内置取模运算符，直接在插值后写%时，Sass语法解析器会优先将其识别为运算符，而非百分比单位的组成部分，因此会抛出标识符预期的错误。而deg不属于Sass内置运算符范畴，解析时会被当作普通字符串和前面的插值结果拼接为单位，所以rotate的写法可以正常运行。

下面两种是最简洁稳定的写法，无需额外定义符号变量：

方案1：数值乘法生成带单位值（最推荐） #

直接用数值乘以1%生成对应百分比单位的属性值，逻辑清晰无额外开销：

$widthCollection: 25, 50, 75, 100;
@each $widthValue in $widthCollection {
  .w-#{$widthValue} {
    width: $widthValue * 1%;
  }
}

方案2：嵌套插值拼接% #

如果需要使用插值的场景，可以通过嵌套插值将%标记为普通字符串，避免被识别为运算符：

$widthCollection: 25, 50, 75, 100;
@each $widthValue in $widthCollection {
  .w-#{$widthValue} {
    width: #{$widthValue#{'%'}};
  }
}

补充：集合存带%数值的修正写法 #

你之前直接把%写在集合中报错，是因为带单位的数值直接插值到类名中会把%也带入类名，不符合CSS类名规范，只要提取数值部分作为类名后缀即可正常使用：

// 自定义移除单位的工具函数
@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

$widthCollection: 25%, 50%, 75%, 100%;
@each $widthValue in $widthCollection {
  .w-#{strip-unit($widthValue)} {
    width: $widthValue;
  }
}

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