使用负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);
}