传递数值参数时SCSS编译报错，@for循环插值使用问题求助

错误原因 #

你在@for循环中使用了#{$s}和#{$e}插值语法，这会将传入的数字参数强制转换为字符串类型，而SCSS的@for循环要求起始值和结束值必须是纯数字类型，因此编译器抛出了"16 is not a number"的错误。

修正后的代码 #

直接使用变量本身即可，无需插值：

@mixin detCls($s, $e) {
  @for $i from $s through $e {
    // 示例逻辑：生成带数字后缀的类名
    .det-item-#{$i} {
      font-size: #{$i}px;
    }
  }
}

@include detCls(16, 24);

补充说明 #

#{}插值语法仅在需要将变量嵌入字符串场景下使用（比如类名、属性值拼接），而在@for循环的数字范围定义中，直接传递数字类型变量即可。

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