具有算术运算的 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 属性中被替换，所以你有这样的东西(无效 ):

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>