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

html

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

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;}