CSS变量可以用于重新计算其自身的值吗？

2024-05-06 • 问答

在CSS中，我们是否可以像下面的代码那样将变量乘以某个整数？

:root {
     --x: 1em;
}

.class2 {
     --x: calc(2em * var(--x));
}

不幸的是，对MDN文档的快速检查并未对此有所帮助。因此，除非您愿意深入研究该规范，否则请进行以下快速测试：

:root {
  --x: 4em;
}

.class2 {
  --x: calc(0.5 * var(--x));
  font-size: var(--x);
}

<div class="class2">
  Test - doesn't work as intended
</div>

从外观上看，计算不仅不起作用-这本身是不幸的-甚至似乎使.class2的自定义属性无效。

仅确保使用其他变量创建计算变量的公式/方法总体上是有效的：

:root {
  --x: 4em;
}

.class2 {
  --y: calc(0.5 * var(--x));
  font-size: var(--y);
}

<div class="class2">
  Test - <strike>doesn't</strike> works as intended
</div>