Question

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

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

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

在样式表中，我希望包含一个否定版本的$navbar-top。

我尝试了这两种方法，但没有成功：

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

任何想法如何否定SCSS变量，而不必声明一个新变量，或者在整个CSS中再次写入calc。

感谢。

修改

如下面的评论所述，这不是Sass negative variable value?
这个问题是关于使用calc（）取消变量集，这与上面的SO帖子无关。我已经注意到上述问题中提出的两种解决方案。他们都没有在这种特殊情况下工作。

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

在顶部声明必要的变量，包括“negator”（ - 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); }

SCSS：基于calc（）的反转/反转变量

2 个答案: