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;

}

巴特西

less匹配模式

最新文章

热门文章