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