使用负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与计算功能.

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

如果您正在使用具有自定义属性的预处理器,则需要在calc函数中转义自定义属性.

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