CSS 具有算术运算的变量在 shorthand 属性中不起作用？

Question

请帮我找出为什么 CSS 变量中的算术运算会破坏代码。

我从一个简单的 CSS 文件开始，只有一个规则：

html {
  font: 16px/32px Arial;
}

在浏览器中，它是这样写的：字体大小为16px，行高为32px，字体本身为Arial。

然后我添加了变量：

html {
  --default-font-size: 16px;
  --default-line-height: var(--default-font-size);
  font: var(--default-font-size)/var(--default-line-height) Arial;
}

它也有效；以为行高是16px，因为我把它设置成和字体大小一样了。

但是当我乘以第二个值时，字体声明停止工作：

html {
  --default-font-size: 16px;
  --default-line-height: var(--default-font-size) * 2;
  font: var(--default-font-size)/var(--default-line-height) Arial;  /* not working! */
}

所有属性 font-size、line-height 和 font-family 都设置为浏览器默认值。

如果我将 font shorthand 属性拆分为三个不同的普通属性，代码再次运行正常：

html {
  --default-font-size: 16px;
  --default-line-height: var(--default-font-size) * 2;
  font-size: var(--default-font-size);
  line-height: var(--default-line-height);
  font-family: Arial;
}

前面的代码示例有什么问题，有没有办法让它在不拆分为普通属性的情况下工作？

Answer 1

您需要像这样使用 calc :

html {
  --default-font-size: 16px;
  --default-line-height: calc(var(--default-font-size) * 2);
  font: var(--default-font-size)/var(--default-line-height) Arial;
}

--default-line-height 在被评估之前在 font 属性中被替换，所以你有这样的东西（无效）：

font: var(--default-font-size)/var(--default-font-size) * 2 Arial;

通过使用 calc，您可以计算表达式并获得有效的语法。即使你的第三个例子也行不通。 CSS 无法识别乘号，因为它应该在 calc

中使用

p {
  --default-font-size: 16px;
  --default-line-height: calc(var(--default-font-size) * 4);
  font: var(--default-font-size)/var(--default-line-height) Arial;
}

<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>

CSS 具有算术运算的变量在 shorthand 属性中不起作用？

CSS variables with arithmetic operations don’t work in shorthand properties?

css

shorthand

css-calc

css-variables