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

Question

我遇到了 CSScalc()函数和 CSS minifier 的问题。在我的源 .css 文件中，我有变量

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

但是，当使用压缩器翻译源文件时，我得到了输出

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

并且无法在网络浏览器中正确读取该值 - 我在 Chrome 开发选项中看到的只是margin-left: calc(-20%+15px); ，旁边有一个警告标志，上面写着“无效的属性值”。

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

标签： cssminifycss-calc

Answer 1

你可以尝试这样写：

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

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