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>

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

1 个答案: