CSS calc() - 单位值的乘法和除法

Question

是否可以使用 calc() 与基于单位的值（如 100%、5px 等）相乘或相除。

例如我希望做这样的事情：

width: calc(100% * (.7 - 120px / 100%));

希望它解决成类似的东西（假设 100% = 500px）：

width: calc(500px * (.7 - 120px / 500px));
width: calc(500px * (.7 - .24));
width: calc(500px * .46);
width: calc(230px);

然而，经过一些试验后，我似乎无法将基于单位的值作为除法的分母。

我似乎也无法将两个值组合在一起，例如 5px * 10px 或 5px * 100%。

我知道在 100% 的情况下允许这样做是没有意义的，但在我的用例中，我想知道 120px 占总宽度的百分比，然后我将其输入到我剩下的计算。

要么，要么如果有人能想出不同的写法，那也行。我绞尽脑汁也想不出来。

Answer 1

在 CSS calc() 除法中 - 右侧必须是 <number> 因此不能在这样的除法中使用基于单位的值。

另请注意，在乘法中，至少有一个参数必须是数字。

MDN 对此有很好的文档。

如果您想要更好的计算方法，可以使用预处理器（我喜欢 Sass）。 link 会将您带到他们的指南（在该页面上有一个关于运算符的部分）。

Answer 2

对于像我这样犯错误的人，不要忘记你不能在CSS的[中使用Sass变量 =12=]直接函数。为此，您必须使用Sass的计算方法。

$test: 10px;

.testing{
    width: $test * 2;
}

或者如果需要 calc 实施：

$test: 10px;

.testing{
  width: calc(50% + #{$test * 2}); // results in calc(50% - 20px)
}

CSS calc() - Multiplication and Division with unit-ed values