Sass/Scss自定义运算公式输出结果不符合预期求助

问题原因 #

Sass 中取模运算符 % 和乘法运算符 * 属于同优先级运算符，默认按照从左到右的顺序执行运算。你原本写的 $i%8*$i%8 实际运算逻辑为：

(($i % 8) * $i) % 8

代入 $i=91 计算就是 ((91%8)*91)%8 = (3*91)%8 = 273%8 = 1，和你得到的错误输出完全一致。

你之前修改的写法报错是因为：你将乘法运算符 * 放在了两个 #{} 插值块之外，插值块输出的是纯文本内容，Sass 不会对两个文本之间的 * 执行算术运算，同时语法不符合 Sass 插值规则，因此直接触发编译错误。

解决方法 #

方法1：用括号强制运算优先级 #

把取模运算放在括号里，让 Sass 优先执行取模，再执行乘法，所有算术运算放在同一个插值块内即可：

$calc-pos-y: calc(#{$j*20%} + #{($i % 8) * ($i % 8)}px);

方法2：提前计算取模结果（可读性更高） #

提前把 $i % 8 的结果存入单独变量，再做乘法运算：

$mod-8: $i % 8;
$calc-pos-y: calc(#{$j*20%} + #{$mod-8 * $mod-8}px);

以上两种写法都可以得到预期结果：当 $i=91 时，输出为 calc(100% + 9px)。

内容的提问来源于stack exchange，提问作者Fouvet Sébastien