使用否定 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 月这篇文章，使用负自定义属性的唯一方法是使用 calc 函数将其乘以 -1。

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