# **匹配**
是對混合的擴展，類似js中的if else判斷，只有**模式名稱匹配成功**才能起作用。
> 注意：匹配模式中,定義的模式名稱都是一樣的，只是參數不一樣，調用的時候只需選擇對應的參數就可以了。
```
@width:100px;
@height:30px;
.radius(@Radius:30px){
border-radius: @Radius;
}
/*參數一：模式名稱 ； 參數二：變量*/
.radius(l_t;@Radius:30px){
border-top-left-radius: @Radius;
}
.radius(l_b;@Radius:30px){
border-bottom-left-radius: @Radius;
}
.radius(r_t;@Radius:30px){
border-top-right-radius: @Radius;
}
.radius(r_b;@Radius:30px){
border-bottom-right-radius: @Radius;
}
div{
width: @width; //可以
height: @height;
background-color: red;
margin: @height;
}
/*四角圓*/
.test1{
.radius(10px);
}
.test2{
.radius(l_t,10px);
}
.test3{
.radius(l_b,10px);
}
.test4{
.radius(r_b,10px);
}
```
拓展
```
/*.類名 有兩個作用，作為類名，作為函數*/
/*如果僅希望作為函數 .類名(){}*/
//@w:200px; 默認參數，如果用戶沒有傳參就使用默認值，如果傳遞值，就用用戶傳遞的值。
.sth(@w:200px;@h:200px;@c:pink;) {
width: @w;
height: @h;
background: @c;
}
/*.br(@lt:5px;@rt:5px;@rb:5px;@lb:5px;){
border-radius:@lt @rt @rb @lb;
}*/
/*匹配模式，很像java的重載。也像咱們js當中的if else*/
/*模式不能加@ 而且是第一位*/
.br(@r:5px;) {
border-radius: @r;
}
.br(lt;@r:5px;) {
border-top-left-radius: @r;
}
.br(rt;@r:5px;) {
border-top-right-radius: @r;
}
.br(rb;@r:5px;) {
border-bottom-right-radius: @r;
}
.br(lb;@r:5px;) {
border-bottom-left-radius: @r;
}
.header {
//.sth(400px;400px;gold;);傳遞參數
.sth(@c:gold;); //跨參數傳遞
border-radius: 30px 10px 30px 10px;
}
```
# **《相關案例》**
****
定義變量小案例
> 定義顏色，或者寬度高度
嵌套使用小案例
> 就是像html結構一樣書寫樣式，簡潔高效
計算使用小案例
> 可以直接 實現加減乘除運算，方便操作
混合定義和使用案例
> 混合的意思其實非常像定義函數，
less函數案例
> 使用less自帶的函數，可以快速實現一些功能。
less官網
LESS官網：[http://lesscss.org/](http://lesscss.org/)
LESS中文網 ：
[http://www.lesscss.cn/](http://www.lesscss.cn/)
[http://www.lesscss.net/](http://www.lesscss.net/)
