有没有办法从 CSS 中的 calc 函数中删除单位

Posted

技术标签:

【中文标题】有没有办法从 CSS 中的 calc 函数中删除单位【英文标题】:Is there a way to remove units from a calc function in CSS 【发布时间】:2017-03-18 06:19:35 【问题描述】:

我目前正在使用以下规则:

margin-left: calc(((100vw - 624px) / 144) * 5);

在 1200 像素的视口宽度上,这给出了 20 像素的值。然而,我实际上想要是得到 20% 的结果。理想情况下,这意味着将“5”的乘法因子从整数更改为“5%”。但为了做到这一点,我需要从其余计算中删除单位,以便 calc 处理 4 * 5% 而不是 4px * 5

在 SASS 中我可以除以 1px,但在 calc 中你只能除以一个数字,而不是一个统一的值。

有没有办法从 calc 函数的一部分中删除单位?

【问题讨论】:

我认为没有办法做到这一点。即使研究 sass 和更少,浏览器支持加上数学计算限制也是获得所需结果的障碍。我认为您可能必须使用 jQuery 进行此计算。 我认为没有办法。 【参考方案1】:

有一个用于 SASS 和其他 CSS 预处理器的 strip-unit 函数,但在 CSS3 中没有类似的函数。

【讨论】:

【参考方案2】:

有一个postcss-strip-units PostCSS 插件

【讨论】:

以上是关于有没有办法从 CSS 中的 calc 函数中删除单位的主要内容,如果未能解决你的问题,请参考以下文章

在 css calc 函数中使用模数

CSS 中另一个 calc() 中的 calc() 函数

有没有办法从 OpenOffice Calc 中的单元格中提取子字符串?

禁用 LESS-CSS 覆盖 calc() [重复]

有没有办法让 CSS calc() 永远不会是负值?

calc()函数要导包吗