使用负 CSS 自定义属性 [重复]

Question

在 SASS 等预处理器中，您可以使用负值，例如：

$margin-md: 10px;

.class {
  margin-bottom: -$margin-md;
}

如何使用自定义属性来做到这一点？

// This doesn't work
.class {
  margin-bottom: -var(--margin-md);
}

Answer 1

截至 2018 年 3 月发布的这篇文章，使用负自定义属性的唯一方法是将其乘以 -1 和 calc 函数。

// Vanilla CSS
.class {
  margin-bottom: calc(var(--margin-md) * -1);
}

如果您使用带有自定义属性的预处理器，则需要在 calc 函数中转义自定义属性。

// SASS
.class {
  margin-bottom: calc(#{var(--margin-md)} * -1);
}