如何强制SASS不计算变量值，直接输出1/3这类网格布局语法？

这个问题我之前也踩过坑！Sass默认会把1/3这种写法当成除法运算，而不是CSS Grid里的行列范围语法，所以才会把你要的网格线解析成小数。下面给你几个实用的解决办法：

方法1：用字符串+unquote()强制输出原内容 #

修改你的混合宏，加入unquote()函数去掉字符串引号，让Sass直接保留你传入的语法：

@mixin grid-row($row) {
  grid-row: unquote($row);
  -ms-grid-row: unquote($row);
}

@mixin grid-column($column) {
  grid-column: unquote($column);
  -ms-grid-column: unquote($column);
}

使用时把行列值用双引号包裹传入：

@include grid-row("1/3");
@include grid-column("2/4");

编译后的CSS会完美保留你要的网格语法：

grid-row: 1/3;
-ms-grid-row: 1/3;
grid-column: 2/4;
-ms-grid-column: 2/4;

方法2：用插值语法#{$}避免运算 #

如果你不想传字符串，也可以在调用宏时用插值语法，直接把表达式当作字符串输出：

@include grid-row(#{"1/3"});

这种写法不需要修改宏本身，但调用时要多写一层插值，可读性不如第一种方法。

额外提醒：IE Grid的语法兼容 #

顺便提一句，你原来的宏里给IE写的-ms-grid-row: $row其实有语法问题——IE的旧版Grid不支持1/3这种范围写法，它需要用-ms-grid-row指定起始行，再用-ms-grid-row-span指定跨越的行数。如果要兼容IE，宏可以改成这样：

@mixin grid-row($start, $span) {
  // 标准Grid语法
  grid-row: #{$start}/#{$start + $span};
  // IE Grid适配语法
  -ms-grid-row: $start;
  -ms-grid-row-span: $span;
}

调用时传入起始行和跨越行数：@include grid-row(1,2)，这样标准浏览器会输出1/3，IE也能得到正确的网格布局规则。

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