四. less下的匹配模式（类似于混入）
它相当于但又不完全是JS中的if，只有满足条件后才能匹配
一句话总结匹配模式：
相当于我传入一个值，这个值会去匹配与它对应的样式；
4.1 首先先举个简单的栗子1： 匹配浮动方向
- 定义一些浮动方向的样式：
// 传参 r ，对应 右浮 ；
.flo(r){
float: right;
}
// 传参 l ，对应匹配 左浮动；
.flo(l){
float: left;
}
举个栗子--》匹配：
- 在混入的时候，会根据传入的参数想上面 刚刚定义的浮动样式的参数进行参数匹配，匹配到哪个，就使用那个对应的浮动方向的样式
.box_float_test1 {
width: 200px;
height: 200px;
background: green;
.flo(l);
}
.box_float_test2 {
width: 300px;
height: 200px;
background: green;
.flo(r);
}
输出样式：
.box_float_test1 {
width: 200px;
height: 200px;
background: green;
float: left;
}
.box_float_test2 {
width: 300px;
height: 200px;
background: green;
float: right;
}
4.2 不行的话在举个栗子2： 匹配定位
// 传参r，对应匹配到相对定位；
.pos(r){
position: relative;
}
// 传参a，对应匹配到绝对定位；
.pos(a){
position: absolute;
}
// 传参f，对应匹配到固定定位；
.pos(f){
position: fixed;
}
举例匹配：
.box_postition_test1 {
width: 200px;
height: 200px;
background: pink;
.pos(f);
}
.box_postition_test2 {
width: 300px;
height: 200px;
background: green;
.pos(r);
}
输出样式：
.box_postition_test1 {
width: 200px;
height: 200px;
background: pink;
position: fixed;
}
.box_postition_test2 {
width: 300px;
height: 200px;
background: green;
position: relative;
}
你也可以在浏览器上选中元素，看它对应的样式， 以及 定位方式是否一致！
