带有算术运算的 CSS 变量在速记属性中不起作用？

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速记属性拆分为三个不同的速记属性，则代码再次正常工作：

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财产得到evalutated让你有这样的事情（前无效）：

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

通过使用calc您评估表达式并且您具有有效的语法。即使你的第三个例子也行不通。CSS 无法识别乘号，因为它应该在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;
}

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