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

Posted 2023-03-06

【中文标题】CSS calc() - 带单位值的乘法和除法

【英文标题】：CSS calc() - Multiplication and Division with unit-ed values

【发布时间】：2015-06-12 20:35:31

【问题描述】：

是否可以使用 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 占总宽度的百分比，然后我将其输入余下的计算。

要么这样，要么如果有人能想出一种不同的方式来写它，那也行。我绞尽脑汁想不出什么来。

【参考方案1】：

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

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

MDN 对此有很好的文档。

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

【讨论】：

哇...我读了 5 次该页面以寻找该规则。我不知道我是怎么错过它就在操作员的描述旁边的。谢谢。这就是我害怕的。我实际上使用的是 LESS，虽然我上面给你的公式我需要用 calc() 计算，因为我需要知道宽度，它是可变的。回到绘图板上，找到一种完全不同的方法。感谢您的明确回答，至少现在我知道这种方式是死路一条。

预处理器不能像 calc() 那样处理，因为这样的计算需要在渲染时完成，这使得 Sass 之类的东西毫无用处。

该规范说分子和分母都可以是数字，那么这样的东西不应该起作用：calc(100 / 2)?

是的，这行得通。分子也可以是像素等单位。

【参考方案2】：

对于像我这样犯错的人，别忘了你不能在 CSS 的 calc 函数中直接使用 Sass 变量。为此，您必须使用Sass的计算方法。

$test: 10px;

.testing
    width: $test * 2;

或者如果需要 calc 实现：

$test: 10px;

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