CSS calc() - 带单位值的乘法和除法
Posted
技术标签:
【中文标题】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)
【讨论】:
以上是关于CSS calc() - 带单位值的乘法和除法的主要内容,如果未能解决你的问题,请参考以下文章