# **匹配**
是对混合的扩展，类似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/)
