css - 使用 less 的 calc 例程

Question

有没有办法使用较少的 css calc() 例程？

如果我访问http://less2css.org/ 并输入以下输入（这只是常规的 css 规则）：

width: calc(100% - 450px);

输出应该完全相同（因为它是常规 css）但是，

less 编译器产生的 css 输出是width: calc(-350%);

有什么办法可以让这个工作吗？

Answer 1

转义值：

width: ~"calc(100% - 450px)";

不过，在 LESS 1.4 中转义是不必要的，因为只有在计算被括号包围时才会进行计算。例如：

prop: 20 + 10px;    ->  prop: 20 + 10px;
prop: (2 + 10px);   ->  prop: 12px;
prop: func(1 + 2);  ->  prop: func(1 + 2);
prop: func((1 + 2));->  prop: func(3);

Answer 2

如果你想在 LESS 表达式中进行计算（除了实际的 css 计算），你可以很快让自己陷入一个难以理解的大混乱中，如下所示：

 @width: 85;
 left: ~'calc('((100vw - @width) / 2)~')';

这导致：

 left: calc( 7.5vw );

如果不添加空格，我找不到这样做的方法。

所以一个更容易阅读的方法是只创建一个中间变量：

 @left: ((100vw - @width) / 2);
 left: ~'calc(@{left})';

结果是：

left: calc(7.5vw);