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）。该链接将带您到他们的指南（在该页面上有关于运营商的部分）。

Answer 2

对于像我这样犯错误的人，请不要忘记您不能直接在css R --version函数中使用 sass变量，因为您必须使用sass计算方法

calc

或者如果仍然需要执行calc

$test: 10px;

.testing{
    width: #{$test * 2};
}