使用较少的计算例程[重复]答案

【问题标题】：The calc routine using less [duplicate]使用较少的计算例程[重复]
【发布时间】：2013-04-24 04:11:05
【问题描述】：

有没有办法通过 less 来使用 css calc() 例程？

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

width: calc(100% - 450px);

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

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

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

【问题讨论】：

标签： css less css-calc

【解决方案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);

【讨论】：

+1 谢谢，还有，有什么方法可以在表达式中使用更少的变量，或者是推动它？
@Danield 你的意思是~"calc(100% - @{varname})"？
是的，varname 是一个较小的变量
@Danield 是的，我给你的例子很有效。这不是一个问题，而是一个伪装成问题的答案；）
@Danield 将计算放在转义字符串之外：@varname: @othervarname * 3;

【解决方案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);

【讨论】：

为什么不这样呢？左：~'calc(((100vw - @{width}) / 2))';