Less学习系列之匹配模式（Mixins混合的一种形式）

系列文章目录

一：Less学习系列之extend继承
二：Less学习系列之Mixins混合
三：Less学习系列之匹配模式（Mixins混合的一种形式）

---

---

一、问题背景

之前开发的时候，经常会用到position定位，然后通过设置top、left、bottom、right来控制元素的位置，但是通常情况下，只需要设置其中的两个值，如果使用默认值+命名参数的形式，那么剩余的值也需要传递，这样就有点麻烦。学习了匹配模式以后，很好的解决了这个问题。

二、代码实现

/*less代码*/
@ctl:red;
@ctr:yellow;
@cbl:blue;
@cbr:green;

.position(@_, @type, @num1, @num2) {
  position: @type;
}
.position(TL, @type, @top, @left) {
  top: @top;
  left: @left;
}
.position(TR, @type, @top, @right) {
  top: @top;
  right: @right;
}
.position(BL, @type, @bottom, @left) {
  bottom: @bottom;
  left: @left;
}
.position(BR, @type, @bottom, @right) {
  bottom: @bottom;
  right: @right;
}
.tl{
	.position(TL,absolute,10px,10px);
	color:@ctl;
}
.tr{
	.position(TR,absolute,10px,10px);
	color:@ctr;
}
.bl{
	.position(BL,absolute,10px,10px);
	color:@cbl;
}
.br{
	.position(BR,absolute,10px,10px);
	color:@cbr;
}

/*编译后的代码*/
.tl {
  position: absolute;
  top: 200px;
  left: 200px;
  background-color: yellow;
}
.tr {
  position: absolute;
  top: 200px;
  right: 200px;
  background-color: blue;
}
.bl {
  position: absolute;
  bottom: 200px;
  left: 200px;
  background-color: red;
}
.br {
  position: absolute;
  bottom: 200px;
  right: 200px;
  background-color: green;
}

(1)：匹配模式可以理解为if判断，TL/TR/BL/BR就是判断条件，如果传入的匹配的是TL，就是用top和left，其余的三种情况类似
(2)：@_是Mixins混合，匹配模式中的一个语法，代表匹配所有的情况，一般情况下，这个混合中放的是公共的样式集

效果图

三、使用匹配模式绘制三角形

position定位是实际开发中遇到的问题，匹配模式有个很经典的应用，就是用来画三角形

  //@_公共样式
  .triangle(@_,@width,@style,@color) {
    border-width: @width;
    border-style: @style;
  }
  .triangle(Top,@width,@style,@color) {
    border-color: transparent transparent @color transparent;
  }
  .triangle(Bottom,@width,@style,@color) {
    border-color: @color transparent transparent transparent;
  }
  .triangle(Left,@width,@style,@color) {
    border-color: transparent @color transparent transparent;
  }
  .triangle(Right,@width,@style,@color) {
    border-color: transparent transparent transparent @color;
  }
  .only-top {
    .triangle(Top,100px,solid,red);
  }
  .only-bottom {
    .triangle(Bottom,100px,solid,yellow);
  }
  .only-left {
    .triangle(Left,100px,solid,blue);
  }
  .only-right {
    .triangle(Right,100px,solid,green);
  }