CSS calc（）-单位值的乘法和除法

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

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

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

希望它能解决如下问题（假设100%=500px）：

然而，经过一些实验，看起来我不能用基于单位的值作为除法的分母

我似乎也不能同时将两个值相加，比如

5px*10px

或

5px*100%

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

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

在CSS calc（）除法中-右侧必须是

，因此在这种除法中不能使用基于单位的值

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

在这方面，有大量的文档

---

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

对于像我这样犯错误的人，请不要忘记，您不能直接在CSS的

calc

函数中使用Sass变量。为此，必须使用Sass的计算方法

$test: 10px;

.testing{
    width: $test * 2;
}

或者如果需要执行

计算

：

$test: 10px;

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

---

哇！我读了5遍那页，寻找那条规则。我不确定坐在操作员描述旁边怎么会错过它。谢谢这就是我害怕的。实际上我用的更少，虽然我上面给你的公式我需要用calc（）计算，因为我需要知道宽度，它是可变的。回到绘图板，找到一种完全不同的方法。感谢你给出了明确的答案，至少现在我知道这种方法是一条死胡同。预处理器不能像calc（）那样处理那么多，因为这样的计算需要在渲染时完成，这使得类似Sass的东西毫无用处。该规范说分子和分母都可以是数字，这样的东西不应该工作：

calc（100/2）

？是的，可以。分子也可以是一个单位，比如px。

$test: 10px;

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