带变量和乘法的 CSS Calc

Question

我正在使用 Nu Html Checker 验证我的 CSS:

https://validator.w3.org/nu/

考虑以下 CSS:

:root {
  --target-size: 48px;
}

.test1 {
  flex: 0 0 calc(var(--target-size) + 1px);
}

.test2 {
  min-height: calc(var(--target-size) - 0.5rem);
}

.test3 {
  flex: 0 0 calc(320px - 3 * var(--target-size));
}

验证器报告 .test1 没有错误和 .test2 .

但是，对于 .test3 ，验证器报告此错误:

错误:flex:类型不兼容。

我知道CSS规则规定对于乘法，至少有一个参数必须是<number>。 .我不认为这违反了。我试过将乘法嵌套在另一个 calc() 中，但错误仍然存​​在。

知道该规则有什么问题以及如何纠正它吗？

Answer 1

如果你改变乘法的顺序，它看起来是可行的:

flex: 0 0 calc(320px - var(--target-size) * 3);

关于 <number> 你是对的参数，但忽略了数字必须在乘法的右侧。