四. less下的匹配模式（類似于混入）
它相當(dāng)于但又不完全是JS中的if，只有滿足條件后才能匹配
一句話總結(jié)匹配模式：
相當(dāng)于我傳入一個(gè)值，這個(gè)值會(huì)去匹配與它對(duì)應(yīng)的樣式；
4.1 首先先舉個(gè)簡(jiǎn)單的栗子1： 匹配浮動(dòng)方向
- 定義一些浮動(dòng)方向的樣式：
// 傳參 r ，對(duì)應(yīng) 右浮 ；
.flo(r){
float: right;
}
// 傳參 l ，對(duì)應(yīng)匹配 左浮動(dòng)；
.flo(l){
float: left;
}
舉個(gè)栗子--》匹配：
- 在混入的時(shí)候，會(huì)根據(jù)傳入的參數(shù)想上面 剛剛定義的浮動(dòng)樣式的參數(shù)進(jìn)行參數(shù)匹配，匹配到哪個(gè)，就使用那個(gè)對(duì)應(yīng)的浮動(dòng)方向的樣式
.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 不行的話在舉個(gè)栗子2： 匹配定位
// 傳參r，對(duì)應(yīng)匹配到相對(duì)定位；
.pos(r){
position: relative;
}
// 傳參a，對(duì)應(yīng)匹配到絕對(duì)定位；
.pos(a){
position: absolute;
}
// 傳參f，對(duì)應(yīng)匹配到固定定位；
.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;
}
你也可以在瀏覽器上選中元素，看它對(duì)應(yīng)的樣式， 以及 定位方式是否一致！
