使用不同方式编写的CSS calc()

Question

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

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

然而，当源文件使用缩小器进行翻译时，我会得到输出。

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

这个值在网页浏览器中无法正确读取 - 在Chrome开发人员选项中，我只能看到margin-left: calc(-20%+15px);，并且旁边有一个警告标志，显示“无效的属性值”。

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

- Coelacanth

---

你使用的是哪个压缩工具？如果相关，请在问题中添加。 - SuperDJ

这将取决于您使用的代码压缩工具以及它是否有解析calc函数的设置。 - Pete

缩小器目前还不为人所知，其设置也无法更改。我们通过远程接口使用它，我们团队中没有人对它有任何了解。我们应该按照现有的方式使用它，更改是最后的选择。 - Coelacanth

你能分享一下这个值的用例吗？我们可以尝试找到另一种方法，在不进行计算的情况下实现相同的目的。 - Temani Afif

@TemaniAfif 我有一个关于用户的内容div。在其下面，我试图放置一张地图（Google Map），并且它的起点应该在用户内容宽度的(-20% + 15)处（换句话说，离用户内容稍微左一点）。地图的宽度也是动态计算的，如width: calc(145% - 55px); 宽度似乎没问题，我猜测是缩小器读取负百分比的问题。 - Coelacanth

Answer 1

你可以尝试用这种方式编写：

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

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

- Temani Afif