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

Answer 2

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

$test: 10px;

.testing{
    width: $test * 2;
}

或者，如果需要calc实现：

$test: 10px;

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