Less学习笔记5：匹配模式

匹配模式：类似于JS中的if语句，但不完全是，满足一定条件后才能匹配

比如：用CSS去画一个三角

<div class='triangle'></div>

.triangle{
    width: 0;
    height: 0;
    overflow: hidden;

    border-width: 10px;
    border-color: red transparent transparent transparent;
    border-style: solid ;
}

这个时候在页面上会出现一个朝下的红色三角形，
如果想让三角形朝上修改代码中的

border-color: transparent transparent red transparent;

但是在IE中，此时的小三角会出现一个黑色的小背景
此时的处理：根据三角的方向，对border-style进行更改
border-style: dashed dashed dashed solid;最后总结：一个朝下的三角形的代码为：

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

在项目中，有时候会有朝上的三角，有时会有朝下的三角，如果一个一个写，就太麻烦了。
此时就用到了匹配模式

// 朝下的三角（三角的朝向和有颜色的方向相反）

.triangle(bottom,@width:5px,@color:#ccc){
    border-width: @width;
    border-color: @color transparent transparent transparent;
    border-style: solid dashed dashed dashed ;
}

// 朝上的三角（三角的朝向和有颜色的方向相反）

.triangle(bottom,@width:5px,@color:#ccc){
    border-width: @width;
    border-color: transparent transparent @color transparent;
    border-style: dashed dashed solid dashed ;
}

//朝左的三角（三角的朝向和有颜色的方向相反）

.triangle(left,@width:5px,@color:#ccc){
    border-width: @width;
    border-color: transparent @color transparent  transparent;
    border-style: dashed solid dashed  dashed ;
}

//朝右的三角（三角的朝向和有颜色的方向相反）

.triangle(right,@width:5px,@color:#ccc){
    border-width: @width;
    border-color: transparent transparent transparent @color;
    border-style: dashed dashed dashed solid;
}

使用：

.test_triangle{
    .triangle(top,100px);
}

但是此时，三角没有设置width ， height 和overflow
所以：这里就需要设置不管选了哪个方向的三角形，都要带上这三个属性，此时：
再加一个匹配：

.triangle(@_,@width:5px,@color:#ccc){
    width: 0px;
    height: 0px;
    overflow: hidden;

}

注意：在这里的匹配中：@width:5px,@color:#ccc 这两个参数必须要写上，不能缺少
然后在使用的时候，就没有不要再写宽度，高度了

// 匹配模式：定位

.pos(r){
    position: relative;
}

.pos(a){
    position: absolute;
}

.pos(f){
    position: fixed;
}

使用：

<div class="pipe"></div>

.pipe{
    width: 200px;
    height: 200px;
    background: #ccc;
    .pos(r);
}