一、混入

混入：分为类混入和函数混入。类混入是将若干个类在另一个 {} 中使用 () 调用，使被调用的类的属性代码在新的类中生成。

1、类混入

.left {
  text-align: left;
}
.txtColor: {
  color: #eee;
}
.box {
  .left();
  .txtColor();
}

// 上面less代码编译成css代码后如下：
.left {
  text-align: left;
}
.txtColor: {
  color: #eee;
}
.box {
	text-align: left;
	color: #eee;
}

可以看出类混入定义的类会被编译到 css 代码中，造成代码冗余。

2、函数混入

.函数名(){};

使用时将类定义到函数中，在另一个类中使用时，直接调用函数即可，但是不会在 css 代码中生成类，函数里可以传入参数，定义了参数后就必须传入参数，否则报错，可传默认参数，就是在形参变量后加冒号，冒号后面的值即为默认值。

@left: left;
@right: right;
.txtLeft (@pos: left) {
  text-align: @pos;
}
.txtColor () {
  color: #eee;
}
.box {
  .txtLeft(@right);
  .txtColor()
}

// 上面代码编译后生成css代码如下：
.box {
  text-align: right;
  color: #eee;
}

ps：混入函数定义中 {} 里面可以继续定义类，使用到函数里具体的某个类时，直接通过函数名加类名的方式 (调用时函数名后不能加括号)。如：

.txtStyle() {
  .color {
      color: #eee;
  }
  .size {
      font-size: 18px;
  }
}
.box {
  .txtStyle.size;
}

// 编译后的css代码如下：
.box {
  font-size: 18px;
}

二、映射：在函数中定义 key 和 value 键值对

使用时，通过 [] 加键拿到具体的 value。如：

.txtStyle () {
  color: #eee;
  size: 25px;
}
.box {
  color: .txtStyle[color];
  font-size: .txtStyle[size]
}

// 编译后的css代码如下
.box {
  color: #eee;
  font-size: 25px;
}

ps：定义键值对时，value 值不能加引号，调用时方法名不能加括号，[] 中的 key 不能加引号。

三、运算

运算：可进行加减乘除等操作。任何的数字、颜色、变量等都可以参与运算。运算符左右两边须用空格隔开，如果两个变量中只有一个变量有单位或两个变量的单位相同时，则结果的单位就与有单位的那个变量相同。如果两个变量都有单位时，以前面变量为结果的单位。

calc ()：使用 calc 后，将不再对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。如:

@num: 20px / 2;
@num2: calc(50px / 2);
.calcWrapper {
  width: calc(50% + (@num - 3px));
  height: @num2;
}

// 编译后的css代码如下：
.calcWrapper {
  width: calc(50% + (10px - 3px));
  height: calc(50px / 2);
}

四、扩展（:extend）

在一个选择其中扩展其他选择器的样式。如：

h3 {
  &:extend(.span);
  font-size: 18px;
}
.span {
  color: #eee;
}

// 编译后的css代码如下
h3 {
  font-size: 18px;
}
.span,
h3 {
  color: #eee;
}

:extend () 中可包含多个类，如:

h3 {
  &:extend(.span, .opa);
  background: #666;
}
.span {
  font-size: 18px;
}
.opa {
  opacity: 0.8;
}

// 编译后的css代码如下：
h3 {
  background: #666;
}
.span, h3 {
  font-size: 18px;
}
.opa, h3 {
  opacity: 0.8;
}

五、循环

@arr: red, green, blue, orange;
@len: length(@arr);
.cont(@count) when (@count <= @len) {
  .list@{count} {
    color: extract(@arr, @count)
  }
  .cont(@count + 1)
}
.cont(0);

// 编译结果如下：
.list1 {
  color: red;
}
.list2 {
  color: green;
}
.list3 {
  color: blue;
}
.list4 {
  color: orange;
}

六、extract 函数

用法：extract (list, index)
list 是一个值列表，值之间可用逗号或空格隔开。

index 是一个整数，指定要返回的列表元素的位置。

七、range 函数

/*
  start：起始值，可选。
  end：最终值。
  step：要增加的数量，可选
*/
用法：range(start, end, step)

range(4);                //1 2 3 4
range(10px, 40px, 10);   // 10px 20px 30px 40px

八、each 函数

/*
each遍历集合值，value指当前值，index指当前索引。
*/
@list: red, green, blue;
each(@list, {
  .box@{index} {
      background: @value;
  }
})

// 编译后的css代码如下：
.box1 {
  background: red;
}
.box2 {
  background: green;
}
.box3 {
  background: blue;
}

九、if 函数

/*
  有3个参数，
  第一个参数是一个布尔表达式，
  第二个参数表示第一个参数为真时返回的值，
  第三个参数表示第一个参数为假时返回的值
*/
@w: 50px;
@h: 50px;
@num: 5;
.box {
  width: if(@val > 10, @w, calc(@w/2));
  height: if(@val > 10, @h, calc(@h/2));
}

// 编译后的css代码如下：
.box {
  width: 25px;
  height: 25px;
}

十、获取图片的宽高

图片的宽度：image-width (imgUrl)

图片的高度：image-height (imgUrl)