如何避免SCSS中斜杠被识别为除法、百分号被识别为取模运算

核心原理是通过字符串插值语法将变量转为纯文本片段，避免SCSS将后续/、%符号判定为运算符。

示例1：行列网格mixin修正 #

修正后的代码如下：

@mixin grid_column_row($column_1,$column_2,$row_1,$row_2) {
  grid-column: #{$column_1}/#{$column_2};
  grid-row: #{$row_1}/#{$row_2};
}

使用#{$变量}的插值语法包裹两个参数后，中间的/会被保留为CSS原生的网格行列分隔符，不会触发除法运算。调用时传入@include grid_column_row(1,3,6,12)，会正常输出grid-column: 1/3; grid-row: 6/12;符合预期。

示例2：百分比字号mixin修正 #

修正后的代码如下：

@mixin font-size_p($percent) {
  font-size: #{$percent}%;
}

插值语法会将变量转为字符串后拼接%，直接输出百分比单位，不会触发取模运算。传入12时会得到font-size: 12%;的正确结果。如果后续需要对字号值做运算，也可以用单位乘法写法：font-size: $percent * 1%;，效果完全一致。

通用避坑方案 #

• 所有需要保留CSS原生符号的变量拼接场景，优先使用#{$变量}插值语法，对所有SCSS版本都兼容
• 如果你使用Sass 1.33及以上版本，可以统一用math.div()函数处理需要做除法运算的场景，其余场景下的/会自动被识别为CSS分隔符
• 单位拼接除插值外，也可以用$变量 * 1单位的写法，适合需要后续对带单位的值做计算的场景

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