为什么在Sass中CSS变量与Sass变量相乘会触发运算报错？

• 核心原因是Sass预编译逻辑和CSS变量的执行时机完全分离：
  Sass是运行在编译阶段的预处理器，所有Sass变量运算、mixin逻辑、自定义函数调用都会在代码编译成CSS的阶段完成，此时还没有进入浏览器解析CSS的环节，var(--myCssVar)对Sass来说只是一个无意义的字符串，不会被解析为对应数值2。
• 你将var(--myCssVar)赋值给Sass变量$mySassVarTwo时，该变量存储的就是var(--myCssVar)字符串本身，而非你预期的数值2。因此执行$mySassVarOne * $mySassVarTwo时，相当于用数字1和字符串做乘法运算，不符合Sass的运算规则，自然触发对应报错。

解决方案参考 #

方案1：编译阶段完成计算（推荐，性能更高） #

如果你的--myCssVar不需要在浏览器端动态修改，直接改用Sass变量存储对应数值即可：

@mixin myMixin($mySassVarOne: 1) {
   $myCssVal: 2; // 改用Sass变量存储数值

   $mySassVarTwo: $myCssVal;
   $result: $mySassVarOne * $mySassVarTwo;
   font-size: myFunction($result);
   // 如果同时需要CSS变量可以额外赋值
   --myCssVar: $myCssVal;
}

方案2：浏览器端完成计算 #

如果确实需要用到CSS变量的动态特性，就把计算逻辑交给CSS的calc()执行，将Sass变量插值到表达式中即可：

@mixin myMixin($mySassVarOne: 1) {
   --myCssVar: 2;
   // 直接在calc中完成计算，不需要Sass层面运算
   font-size: calc(var(--myCssVar) * #{$mySassVarOne});
}

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