【Less】四则运算

Less四则运算特点

1. 对于两个不同单位值之间的运算，不要求你进行运算操作的几个值必须带单位，只要其中有一个有单位就可以了，运算结果的值会优先取第一个值的单位为准。如：

   • 20+30px-10em编译成40px。
   • @border:10em;
border:(@border+2px) solid orange; 编译成border: 12em solid orange;。

2. 如果两个值之间只有一个值有单位，则运算结果就取该单位。

   • @padding:20+20px;
padding:@padding; 编译成padding: 40px;。

3. 可以使用()小括号来添加一些更复杂的运算操作。

4. 在对颜色进行运算时，会忽略颜色值前面的#号。

   • @background:#804020;
background:@background + #080402;编译成 background: #884422;。

5. 算术运算符在加、减或比较之前会进行单位换算。

6. 乘法和除法不作单位的转换。因为这两种运算在大多数情况下都没有意义，一个长度乘以一个长度就得到一个区域，而CSS是不支持指定区域的。其中除法运算语法在有些环境中并不能被正确的计算，如下锁示：

   • @padding:20+20px;
padding:@padding / 2; 编译成padding: 40px / 2;。

如果单位换算无效或失去意义，则忽略单位。颜色值的加减建议使用颜色函数，颜色函数提供更复杂的功能。

四则运算示例

less代码

@width:100px;
@height:100px;
@border:10em;
@margin:20px;
@padding:20+20px;
@background:#804020;
@font-size:20+30px-10em;

.box {
    width:@width + 100px; 
    height:@height + 100; 
    border:(@border+2px) solid orange; 
    margin:@margin *2px; 
    padding:@padding / 2; 
    background:@background + #080402; 
    font-size:@font-size;
}

less生成的css

.box {
  width: 200px;
  height: 200px;
  border: 12em solid orange;
  margin: 40px;
  padding: 40px / 2;
  background: #884422;
  font-size: 40px;
}

其中，除法经过less编译后并未得到我们想要结果，而是原样输出了。怎么才能让除法生效呢?

---

除法的处理

下面有两种方案
注意： 以下两种方案不一定所有的less编译器都支持，请尝试使用其中的一种

1.将除号和参与运算的变量或数字用小括号()包起来

padding:(@pd / 2);

Win10系统中，Visual Studio Code v1.79.2使用Easy LESS v2.0.0 插件验证，此方案可以在此环境可行

2.将除号/书写改为./

padding:@pd ./ 2;

这时上述示例的40px / 2编译后得到结果20px