CSS 以不同方式编写的 calc()

Question

我在使用 CSS calc() 函数和 CSS 压缩器时遇到问题。在我的源 .css 文件中，我有变量

margin-left: calc(15px - 20%);

然而，当源文件用压缩器翻译时，我得到了输出

margin-left: calc(-20%+15px);

并且无法在 Web 浏览器中正确读取该值 - 我在 Chrome 开发选项中只能看到 margin-left: calc(-20%+15px);，旁边的警告标志写着 "Invalid property value"。

我怎样才能避免这种情况，也许以不同的方式编写 calc() 函数来解决这个问题？更改源 .css 文件中变量的位置不会产生任何变化，而且我无法选择使用不同的压缩器。

Answer 1

你可以试试这样写：

.box {
 margin-left: calc(-1*calc(20% - 15px));
}

<div class="box">
</div>