匹配模式：類似於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);
}