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

Posted 2023-03-06

【中文标题】使用较少的计算例程[重复]

【英文标题】：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%);

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

【参考方案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))';