less运算（operations）

Posted 2023-05-13

参考技术A

运算类型 ：任何数值，颜色，变量都可以运算
单位 ：less会给你自动推算单位，所以不需要每一个都加单位，但保证至少有一个加了单位
注意 ：运算符与数值之间要以空格分开，涉及优先级时以（）进行优先级计算

1. 数值型运算

编译后的css文件

编译后的css文件

注意：单位加在哪里都行，只要有一个地方有单位，less就能推断出计算后结果的单位。

2. 颜色值运算

编译后的css文件

3. 进制之间的转化
请参考文章《最常见的进制之间的转化》 http://www.jianshu.com/p/32a9fad022ec

有没有办法在 Less 中为 ~ 运算符使用变量，例如 ~"calc(100% - @spacing)";

【中文标题】有没有办法在 Less 中为 ~ 运算符使用变量，例如 ~"calc(100% - @spacing)";

【英文标题】：Is there a way to use variables in Less for the ~ operator, like ~"calc(100% - @spacing)";

【发布时间】：2012-12-26 02:29:41

【问题描述】：

有没有办法在less~运算符中使用变量，比如

~"calc(70% - @spacing)";

当我尝试过它时，它只适用于静态值，例如

 ~"calc(70% - 10px)";

我可以在将字符串设置为属性之前获取要评估的字符串吗？

【参考方案1】：

要禁用 LESS 在发现两个数值之间的 - 但仍能使用变量时自动执行的计算，您可以编写以下内容之一：

1) 只对触发计算的运算符进行转义，像平常一样使用变量

@padding: 20px;
body 
    padding: calc(100% ~"-" @padding);

2) 转义整个表达式并使用@padding 表示法插入变量

@padding: 20px;
body 
    padding: ~"calc(100% - @padding)";

我更喜欢第二个版本，因为它类似于 javascript's template literals 并且看起来更干净一些，但无论哪种方式都可以。

两种解决方案都禁用自动 Less 计算并编译为正确的结果：

body 
  padding: calc(100% - 20px);

【讨论】：

这很有启发性