SCSS：基于 calc() 取反/取反变量

Question

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

我了解无法在 SCSS 变量中组合单位类型，因此我改用 calc():

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

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

这两个我都试过了，都没有成功：

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

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

谢谢。

---

编辑

• 如下面的 cmets 所述，这不是 Sass negative variable value? 的副本
• 这个问题是关于用 calc() 否定一个变量集，这与上面的 SO 帖子无关。我已经注意到上面那个问题中提出的两种解决方案。在这种特殊情况下，它们都不起作用。

---

编辑 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>

Answer 2

您可以使用@function 代替变量

DEMO

// The argument is defaulted to true,
// so you only need to pass an argument if you want a negative number
@function navbar-top($isPositive: true) {
    @if $isPositive { @return calc(40px + 1rem); }
    @else {@return calc((40px + 1rem) * -1); }
}

// Calling the function with the default value
.normal { margin-top: navbar-top(); }

// Calling the function with negative value
.negative { margin-top: navbar-top(false); }