使用负 CSS 自定义属性 [重复]

Posted 2023-02-23

【中文标题】使用负 CSS 自定义属性 [重复]

【英文标题】：Using negative CSS Custom Properties [duplicate]

【发布时间】：2018-09-03 07:01:02

【问题描述】：

在 SASS 等预处理器中，您可以使用负值，例如：

$margin-md: 10px;

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

如何使用自定义属性来做到这一点？

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

【参考方案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);