我擦，好安靜，公司現(xiàn)在只剩下我一個(gè)人了，哈哈，可以盡情的敲擊鍵盤(pán)了。
下面是關(guān)于less語(yǔ)法之混合，文章中有的變量名在本篇中找不到，是因?yàn)槲叶x在上一篇文章中，寫(xiě)的太長(zhǎng)了，索性就將文章一塊一塊的寫(xiě)，這樣標(biāo)題看著比較清晰，如果看不太明白的話，可以按照順序來(lái)看一看，上下聯(lián)系一下就可以了。
關(guān)于less語(yǔ)法，我都寫(xiě)在同一個(gè)文集中，可以看看《less語(yǔ)法》文集；
三. 混合
關(guān)于混合，分一下三種情況：
- 不帶參數(shù)；
- 帶參數(shù)，無(wú)默認(rèn)值；
- 帶參數(shù)，同時(shí)設(shè)置默認(rèn)值；
調(diào)用的時(shí)候存在的區(qū)別：
- 不帶參數(shù)的，不加括號(hào)，直接使用；
- 帶參數(shù)，無(wú)默認(rèn)值的；調(diào)用的時(shí)候加括號(hào)，括號(hào)里必須傳值，不然會(huì)報(bào)錯(cuò)；
- 帶參數(shù)，有默認(rèn)值的，調(diào)用的時(shí)候加括號(hào)，可傳也可不傳參數(shù)，不傳參默認(rèn)使用默認(rèn)值，不會(huì)報(bào)錯(cuò)；
| 項(xiàng)目 | 不帶參數(shù) | 帶參數(shù)，無(wú)默認(rèn)值 | 帶參數(shù)，有默認(rèn)值 |
|---|---|---|---|
| 調(diào)用 | .border; | .border_test1(1px); | .border_test2(1px); |
| 調(diào)用時(shí)特殊情況 | .border_test1();//報(bào)錯(cuò) | .border_test2();//使用默認(rèn)值，不報(bào)錯(cuò) | |
| --- | --- | 具體使用代碼看下文 | --- |
3.1 less混合--不帶參數(shù)
設(shè)置一個(gè).box的 樣式1：
.box {
width: @demo_width;
height: @demo_height;
background-color: @color_style;
font-size: 16px;
margin: 0 auto;
}
設(shè)置一個(gè).border的 樣式2：
.border {
border：2px solid red;
}
怎么使用混合使樣式1也具有樣式2的樣式？
- 之前的做法肯定是找到
class='box'的元素，然后給追加一個(gè)border的類名，即class='box border' - 使用less的話，可以直接將這個(gè)類名添加到要被追加元素的樣式里面即可
.box {
width: @demo_width;
height: @demo_height;
background-color: @color_style;
font-size: 16px;
margin: 0 auto;
// 混合寫(xiě)法（該注釋不被保留）
/*混合寫(xiě)法（該注釋被保留）*/
.border;
}
編譯結(jié)果：
.box {
width: 300px;
height: 500px;
background-color: #E0EAFA;
font-size: 16px;
margin: 0 auto;
/*混合寫(xiě)法（該注釋被保留）*/
border: 2px solid red;
}
同理，如果定義一個(gè).box2的樣式是在.box的基礎(chǔ)上追加新樣式，混合寫(xiě)法如下：
.box2 {
.box;
/*追加的樣式*/
padding: 20px;
color: #393939;
}
3.2 less混合--帶參數(shù)(不設(shè)置默認(rèn)值)
可以傳參數(shù)，參數(shù)可以寫(xiě)成一個(gè)變量，這樣根據(jù)你的需要引用同一個(gè)類的樣式，但傳遞參數(shù)不同，樣式不同
注意： 如果不設(shè)置默認(rèn)值的話，必須給它傳參，不然是會(huì)報(bào)錯(cuò)的?。?！
我們可以給它傳遞一個(gè)變量做參數(shù)，這樣我們可以動(dòng)態(tài)的變化這個(gè)值，如下：
.border_test1(@border_width) {
border: @border_width solid green;
}
舉個(gè)栗子吧：
.box_test1 {
.border_test1(1px);
width: 100px;
height: 200px;
background-color: red;
}
.box_test2 {
.border_test1(2px);
width: 300px;
height: 200px;
background-color: yellow;
}
編譯結(jié)果：
.box_test1 {
border: 1px solid green;
width: 100px;
height: 200px;
background-color: red;
}
.box_test2 {
border: 2px solid green;
width: 300px;
height: 200px;
background-color: yellow;
}
3.3 less混合--帶參數(shù)（設(shè)置默認(rèn)值）
相當(dāng)于ES6語(yǔ)法中的設(shè)置變量，帶參數(shù)默認(rèn)值，如果有參數(shù)就使用參數(shù)，如果沒(méi)有參數(shù)或者參數(shù)為undefined就使用默認(rèn)值
這里我們給它傳遞變量做參數(shù)的同時(shí)設(shè)置默認(rèn)值，如果有參使用參數(shù)，無(wú)參使用默認(rèn)值代替，如下：
.border_test2(@border_width: 10px) {
border: @boeder_width solid pink;
}
舉個(gè)栗子吧：
.box_text3 {
.border_test2(5px);
width: 200px;
height: 100px;
}
.box_test4 {
// 不傳參使用默認(rèn)值，有默認(rèn)值的時(shí)候，不傳參也不會(huì)報(bào)錯(cuò)
.border_test();
width: 150px;
height: 100px;
}
編譯結(jié)果：
.box_text3 {
border: 5px solid pink;
width: 200px;
height: 100px;
}
.box_test4 {
border: 10px solid pink;
width: 150px;
height: 100px;
}
提示：
變量命名不沖突；
定義在border_test1中的
@border_width變量與定義在border_test2中的@border_width變量是不會(huì)互相沖突的;定義在border_test1中的
@border_width變量只在border_test1中起作用；同樣，定義在border_test2中的
@border_width變量只在border_test2中起作用；設(shè)置變量傳遞參數(shù)的時(shí)候，有單位的一定要記得帶上單位；
再來(lái)舉個(gè)混合的栗子吧：
.border_radius(@radius: 10px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-o-border-radius: @radius;
-ms-border-radius: @radius;
border-radius: @radius;
}
#box_radius_test {
width: 500px;
height: 500px;
background: green;
//帶參混入,傳參使用參，不傳使用默認(rèn)值
.border_radius();
}
編譯結(jié)果：
#box_radius_test {
width: 500px;
height: 500px;
background: green;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
--------雖然感覺(jué)寫(xiě)東西，很浪費(fèi)時(shí)間，但是每一次的總結(jié)，總會(huì)有新的意外收獲，繼續(xù)加油吧，呆萌小二郎！