如何对用calc()定义的SCSS变量进行取反？

你可以通过定义一个取反因子变量，结合calc()的乘法特性来实现目标，不需要重复编写原calc表达式或者额外声明新变量，具体步骤如下：

1. 声明基础变量与取反因子 #

在样式表顶部先定义好你的目标变量，同时新增一个用于取反的因子变量：

$navbar-top: calc(40px + 1rem);
$neg: -1; // 通用取反因子

2. 复用变量实现取反 #

在需要使用的位置，通过calc()将取反因子和目标变量相乘，即可得到取反后的值：

/* 使用原变量（非取反版本） */
margin: $navbar-top 0 0;

/* 使用取反后的变量 */
margin: calc(#{$neg} * #{$navbar-top}) 0 0;

编译后的CSS会自动处理嵌套的calc()结构，最终输出：

margin: calc(-1 * calc(40px + 1rem)) 0 0;

浏览器能够正确解析这种嵌套表达式，计算出最终的负值结果。

为什么直接用-$navbar-top或-#{$navbar-top}无效？ #

因为你的变量本身是一个calc()表达式，直接在前面加负号时，SCSS无法正确解析混合单位的运算逻辑，会导致编译错误或不符合预期的输出。而通过乘法因子的方式，是交给CSS原生的calc()来处理整个表达式的取反，完全符合CSS语法规则。

补充说明 #

• 本问题不同于普通SCSS变量的取反场景，常规的-$var取反方法不适用于calc()定义的混合单位变量。
• 该方案无需重复编写原calc表达式，仅通过复用原变量和取反因子就能实现需求。

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