SASS编译时将grid-column的1/3识别为除法运算该如何处理

架构老林

2026-9-30

问题原因及解决方法

你遇到的编译问题是旧版Sass（低于1.33.0版本）的默认语法规则导致的，旧版Sass会把所有以/分隔的两个数字自动识别为除法运算，因此会把1 / 3计算为小数输出。
你可以通过以下任意一种方法解决该问题：

使用Sass插值语法#{}包裹数值，告诉Sass该内容不需要做运算处理，直接作为字符串输出
示例代码：
```
grid-column: #{1} / #{3};
```
编译后将输出正确结果：grid-column: 1 / 3;
将属性值作为完整字符串传入unquote()函数，直接输出原始内容
示例代码：
```
grid-column: unquote("1 / 3");
```
升级使用Dart Sass 1.33.0及以上版本，该版本之后Sass的除法运算统一要求使用math.div()函数实现，原生CSS属性中自带的/符号不会再被识别为除法运算，直接书写原有代码即可正常编译。