本文接《less基础使用方法之变量、混合、嵌套》

五、匹配模式

匹配，举个简单栗子来说。就和我们常用的百度一个到了，输入你的内容，去查找出对应的文字。而less中匹配也是类似于这样的效果。

以border为例，每个方向的border都是一个class。在调用中，根据特定的值，来调用对应的class。

编译前
//匹配模式
.border3(top){
    border-top: #008000px solid 5px;
}
.border3(bottom){
    border-bottom: #008000px solid 5px;
}
.border3(right){
    border-right: #008000px solid 5px;
}
.border3(left){
    border-left: #008000px solid 5px;
}

.test_border{
    .border3(top);//调用参数为top的class
}
编译后
.test_border {
  border-top: #008000px solid 5px;
}

注：这里不仅仅只是border，其余任何都可以这么处理。如定位，三角形的箭头方向等等

六、运算

less支持运算符+-*/

如，我们常用的宽度加减乘除等的；

上一篇的变量设置中就简单的使用了运算符+

七、避免编译

为什么我们要避免编译，大家都知道less是支持运算的。简而言之，就是你在css中的任何运算操作，经过less编译后都会进行处理。

到这里你是否记得css3中有这样一个函数calc() 

如果你在less中使用该函数的话，经过编译后，得到的结果可能并非是你想要的，而是经过计算后的结果。那么这个时候就需要用到避免编译操作；

编译前
.tets{
    width:~"calc(100% - 20%)" ;
}
编译后
.tets {
  width: calc(100% - 20%);
}

当然，避免编译不仅仅是用于该参数，对于你所有不想让它进行变异的都可以这么处理~""