calc例程使用较少

Question

有没有办法使用较少的css calc（）例程？

如果我转到http://less2css.org/并输入以下输入（这只是一个常规的CSS规则）：

width: calc(100% - 450px);

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

较少的编译器生成的css输出是width: calc(-350%);

有没有办法让这个工作？

Answer 1

Escape价值：

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);