5

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

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

4

1 回答 1

12

你需要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>

于 2017-10-20T14:12:12.900 回答