SCSS：基于 calc() 的反转/否定变量

Question

我正在使用 SCSS 并想在顶部指定一个基于 px 和 rem 值之和的变量。

我知道不可能在 SCSS 变量中组合单位类型，所以我使用calc()：

$navbar-top: calc(40px + 1 rem);

在样式表的更下方，我想包含一个否定版本的$navbar-top.

我尝试了这两个，但没有成功：

(-$navbar-top)
-#{$navbar-top}

知道如何否定 SCSS 变量，而不必声明新变量，或在整个 CSS 中再次编写 calc 。

谢谢。

编辑

编辑 2：基于下面 TEMANI 的回答的 SCSS 解决方案

在顶部声明必要的变量，包括“否定”（-1）：

$navbar-top: calc(40px + 1rem);
$neg: -1;

然后，该变量可以在整个过程中使用（否定或不否定），如下所示：

/* Non-negated */
margin: $navbar-top 0 0;

/* Negated */
margin: calc(#{$neg} * #{$navbar-top}) 0 0;

上面的否定版本将编译为以下 CSS：

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

Answer 1

由于calc不是通常的值，因此您不能简单地-在其上附加符号来获取负值。

一个想法是考虑另一个参数来控制符号。这是一个使用纯 CSS 和 CSS 变量的想法，而不需要另一个calc()

.box {
  margin-top: calc( var(--s,1)*(40px + 1rem));
  height:100px;
  background:rgba(255,0,0,0.5);
}

<div class="box"></div>
<div class="box" style="--s:-1"></div>

您可以使用类定义负值

.box {
  margin-top: calc( var(--s,1)*(40px + 1rem));
  height:100px;
  background:rgba(255,0,0,0.5);
}
.neg {
  --s:-1;
}

<div class="box"></div>
<div class="box neg"></div>

更新

您还可以考虑使用变量的表达式：

:root {
  --exp:(40px + 1rem);
}

.box {
  margin-top: calc( var(--s,1)*var(--exp));
  height:100px;
  background:rgba(255,0,0,0.5);
}

<div class="box"></div>
<div class="box" style="--s:-1"></div>