如何让SASS忽略grid-area内/的数学运算 仅执行指定变量计算

SASS默认会把属性值里用/分隔的数值判定为除法运算，你原来的写法会把整串3 / 10 / 4 / $grid-columns + 1当成一个数学表达式计算，所以输出了错误的数值结果。

只要用SASS的插值语法#{}包裹需要计算的变量部分，就可以让SASS把/当成普通的属性值分隔符处理，仅执行$grid-columns + 1的计算，正确写法如下：

grid-area: 3 / 10 / 4 / #{$grid-columns + 1};

当$grid-columns赋值为10时，上述代码会准确输出你需要的结果：

grid-area: 3 / 10 / 4 / 11;

补充说明 #

如果你的项目使用Dart Sass 1.33及以上版本，也可以开启新版除法运算规则，仅通过math.div()函数执行除法运算，该规则下原生的/符号不会被识别为除法运算符，你原本的写法也可以正常生效，但插值写法兼容性更好，适配所有SASS版本。

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