less匹配模式

less里面的匹配模式相当于js里面的if，但又不完全是，比如用css画一个三角

html

<div class="sanjiao"></div>

less

.sanjiao{
　　width: 0px;
　　height: 0px;
　　overflow: hidden;
　　border-width: 10px;
　　border-color: red transparent transparent transparent;
　　border-style: solid;
}

这是一个朝下的三角，那么想让它朝上怎么办呢,把border-color改成

border-color: transparent transparent red transparent;

就可以了

 

这个时候问题时，每次写这个三角都时候，一会向上，一会向下，都要写这么一堆吗，可以用匹配模式，

less

//匹配模式
.match(top,@w:10px,@c:red){
　　border-width: @w;
　　border-color: transparent transparent @c transparent;
}
.match(bottom,@w:10px,@c:red){
　　border-width: @w;
　　border-color: @c transparent transparent transparent;
}
.match(left,@w:10px,@c:red){
　　border-width: @w;
　　border-color: transparent @c transparent transparent;
}
.match(right,@w:10px,@c:red){
　　border-width: @w;
　　border-color: transparent transparent transparent @c;
}
//@_表示，不管上下左右都带上这个固定的样式
.match(@_,@w:10px,@c:red){
　　width: 0px;
　　height: 0px;
　　overflow: hidden;
　　border-style: solid;
}
.sanjiao{
　　.match(bottom)
}

=>

.sanjiao {
　　border-width: 10px;
　　border-color: #ff0000 transparent transparent transparent;
　　width: 0px;
　　height: 0px;
　　overflow: hidden;
　　border-style: solid;
}

 

 

如果说上面的有点复杂，我们来个稍微简单点的，比如定位

html

<div class="posDiv"></div>

less

.pos(a){
　　position: absolute;
}
.pos(r){
　　position: relative;
}
.pos(f){
　　position: fixed;
}
.posDiv{
　　width: 100px;
　　height: 100px;
　　.pos(a);
}
=>
.posDiv {
　　width: 100px;
　　height: 100px;
　　position: absolute;
}