相关疑难解决方法(0)

我正在尝试calc()在Sass样式表中使用该函数,但我遇到了一些问题.这是我的代码:

$body_padding: 50px

body
    padding-top: $body_padding
    height: calc(100% - $body_padding)

如果我使用文字50px而不是我的body_padding变量,我会得到我想要的.但是,当我切换到变量时,这是输出:

body {
    padding-top: 50px;
    height: calc(100% - $body_padding); }

我怎样才能让Sass认识到它需要替换calc函数中的变量？

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

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

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

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

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

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

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

谢谢。

编辑

• 正如下面的评论中所指出的，这不是Sass 负变量值的重复吗？
• 这个问题是关于用 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)) …

我们来看看这个SCSS代码:

$margin: 10px;
.use_value {
  margin: 10px 0 0 10px;
}
.use_var {
  margin: $margin 0 0 $margin;
}
.use_negative_var {
  margin: -$margin 0 0 -$margin;
}

我期待.use_value,.use_var并且.use_negative_var是同意的,但这是结果:

.use_value {
  margin: 10px 0 0 10px;
}
.use_var {
  margin: 10px 0 0 10px;
}
.use_negative_var {
  margin: 10px 0 -10px; 
}

为什么会出现丢失0的.use_negative_var？