logo标签列表

使用负CSS自定义属性

csscss-variables
86
在预处理器（例如SASS）中，您可以使用负值，如：
$margin-md: 10px;

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

如何使用自定义属性来实现这个功能？
// This doesn't work
.class {
  margin-bottom: -var(--margin-md);
}
1个回答
239

截至此篇文章发布的时间，即2018年3月，使用负自定义属性的唯一方法是通过calc函数将其乘以-1。

// Vanilla CSS
.class {
  margin-bottom: calc(var(--margin-md) * -1);
}
6
这不是唯一的方法...你也可以从0px中减去它，即margin-bottom: calc( 0px - var(--myvalue) ); 虽然从本质上讲它是相同的，因为像vh和vw这样的单位不允许与其他单位进行乘法或除法运算，所以在一些罕见的情况下，同一表达式中存在乘法可能会导致问题，虽然我只是猜测，但为什么要冒险呢？或者在万一出现问题时有一个备选方案呢？ - undefined
4
这不是唯一的方法...你也可以从0px中减去它，即margin-bottom: calc( 0px - var(--myvalue) ); 虽然从本质上来说它是相同的，因为像vh和vw这样的单位不允许与其他单位进行乘法或除法运算，所以在某些罕见情况下，同一个表达式中存在乘法可能会导致问题，虽然我只是猜测，但为什么要冒险呢？或者在万一出现问题时有一个备选方案呢？ - GibsonFX
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接