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

【问题标题】：CSS variables with arithmetic operations don’t work in shorthand properties?具有算术运算的 CSS 变量在速记属性中不起作用？
【发布时间】：2018-04-01 17:33:38
【问题描述】：

请帮我找出为什么 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;
}

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

【问题讨论】：

你确定第三个有效吗？应该不会太
@TemaniAfif，你说得对，它可以部分工作：font-size 和 font-family 已设置，但 line-height 未设置。
是的，在这种情况下是逻辑，行高在第三种情况下也不应该起作用......它也需要calc 函数;)

标签： css shorthand css-calc css-variables

【解决方案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;
}

&lt;p&gt;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&lt;/p&gt;

【讨论】：

但这段代码似乎不能仅在 Firefox 中工作，而在其他浏览器中工作。是代码的错还是 Firefox 的错？ :root { --grid-spacing: 12px; --font-size-default: calc(var(--grid-spacing) * 4/3); --line-height-default: calc(var(--grid-spacing) * 2); } html { font: var(--font-size-default)/var(--line-height-default) Arial; }