css - 使用负面的CSS自定义属性

This question already has answers here:

How can I get a negative value of a CSS variables in a calc() expression?

(2个答案)


2年前关闭。




在像SASS这样的预处理器中，您可以使用负值，例如:

$margin-md: 10px;

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

我该如何使用自定义属性？

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

最佳答案

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

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

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

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

关于css - 使用负面的CSS自定义属性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49469344/