less运算（operations）

一：概念

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

二：实例分析

1. 数值型运算

• 小例子
  less文件

header{
    width: 100px + 10;
    height: 20 + 10px;
}

编译后的css文件

header {
  width: 110px;
  height: 30px;
}

• 涉及到优先级的小例子，高优先级的用（）括起来
  less文件

    height: (10 + 30) * 2px;

编译后的css文件

  height: 80px;

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

2. 颜色值运算

• 规则： less在运算时，先将颜色值转化为rgba模式，然后再转换为16进制的颜色值并返回
• 注意1 ： 在颜色运算时，能直接使用颜色的名称如green进行运算，比如 red - 55 = #c80000，但是在之前这个功能无效
• 注意2 ： 实际上是拆分之后再转化成16进制的 #ffffff - 55 = c8c8c8 = rgb(200,200,200)，拆成两个一个，分别代表r,g,b
• 注意3 ： 加的值超过255，只会取到255 #111111 + 260 = #ffffff
• 注意4 ： rgb模式的取值为 0~255
• 小例子
  less文件

background-color: red - 55;
background-color: #111111 + 260;
background-color: #000000 + 55;

编译后的css文件

  background-color: #c80000;
  background-color: #ffffff;
  background-color: #373737;

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