如何使用CSS自定义属性实现类似预处理器的负值效果？

你说得没错，Sass这类预处理器里直接在变量前加-就能得到负值，但CSS自定义属性（也就是CSS变量）这么写行不通——因为CSS会把-var(--margin-md)当成一个整体的标识符，而不是对变量值做数学运算。下面给你几个可行的解决方案：

方案1：用calc()函数（最推荐） #

calc()是CSS原生支持的计算函数，能直接对变量值进行乘法运算来得到负值，兼容性也非常好。示例代码：

:root {
  --margin-md: 10px;
}

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

这样计算后，margin-bottom就会被解析为-10px，完美达到你要的效果。

方案2：提前定义正负变量 #

如果你的变量值固定不变，也可以直接在定义变量时就同时声明正负版本，使用的时候直接调用对应的变量：

:root {
  --margin-md: 10px;
  --margin-md-negative: -10px;
}

.class {
  margin-bottom: var(--margin-md-negative);
}

不过这种方式灵活性差一些，如果后续需要修改--margin-md的值，还要同步修改负值变量，不如calc()省心。

方案3：使用CSS数学函数（现代浏览器支持） #

在较新的浏览器中，你也可以用CSS原生的multiply()数学函数来实现，写法更简洁：

:root {
  --margin-md: 10px;
}

.class {
  margin-bottom: multiply(var(--margin-md), -1);
}

注意这个方法的兼容性不如calc()，如果需要兼容旧版浏览器（比如IE11），还是优先用方案1。

内容的提问来源于stack exchange，提问作者bholtbholt