具有CSS自定义属性的条件样式

Question

我喜欢使用 css自定义属性，但是我经常发现我希望自己能做得到。

我希望能够根据CSS定制属性的值有条件地应用某些样式。这是一些伪代码：

.something {
  border: var(--is-dark-theme) ? 1px solid : none;
}

我知道自定义属性无法像这样工作。但是，也许还有其他我不知道的方式可以帮助我达到类似的结果？

或者也许有一些规范建议，将来有可能吗？

Answer 1

您有时可以使用calc()来获得大致相似的结果。在这种情况下，如果--is-dark-theme为0或1，则可以将其乘以边框的width以显示或隐藏它：

.something {
  border: calc(var(--is-dark-theme) * 1px) solid black;
}

<div class="something" style="--is-dark-theme: 1">Dark theme</div>

<div class="something" style="--is-dark-theme: 0">Light theme</div>

Answer 2

这里是另一个类似于Ori Drori answer的想法，我依靠在边框内部使用无效值来删除边框。如果您想使用一些false / true / yes / no

这样的已知关键字，这会很有用。

.something {
  border: var(--is-dark-theme,2px) solid black;
}

<div class="something">Dark theme</div>

<div class="something" style="--is-dark-theme: false">Light theme</div>