<!doctype html> <head> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <div class="style"> <h2>Welcome to Yiibai Yiibai</h2> <p>Hello, You guys!</p> </div> </body> </html>
h2 { &:extend(.style); font-style: italic; } .style { background: green; }
lessc extend.less extend.css
h2 { font-style: italic; } .style, h2 { background: blue; }
擴(kuò)展放入規(guī)則集或連接到一個(gè)選擇器。它類(lèi)似于包含一個(gè)或多個(gè)類(lèi),它們是由逗號(hào)分隔的偽類(lèi)。使用可選的關(guān)鍵字all,每個(gè)選擇器可以這樣遵循。
<!doctype html> <head> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <div class="style"> <h2>Welcome to Yiibai Yiibai</h2> <div class="container"> <p>Hello, You guys!</p> </div> </div> </body> </html>
.style:extend(.container, .img) { background: #BF70A5; } .container { font-style: italic; } .img{ font-size: 30px; }
lessc style.less style.css
.style { background: #BF70A5; } .container, .style { font-style: italic; } .img, .style { font-size: 30px; }
S.N. |
類(lèi)型和說(shuō)明
|
---|---|
1 |
擴(kuò)展連接到一個(gè)選擇器,類(lèi)似于具有選擇器作為參數(shù)的偽類(lèi)。
|
2 |
擴(kuò)展內(nèi)部規(guī)則集
&:extend延長(zhǎng)(選擇器)語(yǔ)法可以在規(guī)則集主體里面放。
|
3 |
擴(kuò)展嵌套選擇器
嵌套選擇器使用擴(kuò)展選擇器匹配。
|
4 |
使用擴(kuò)展精確匹配
默認(rèn)情況下擴(kuò)展外觀選擇器之間的精確匹配。
|
5 |
nth表達(dá)式
第n個(gè)表達(dá)式的形式在某種程度上很重要,否則,它對(duì)待選擇器將不同。
|
6 |
當(dāng)關(guān)鍵字 all 被最后確定在擴(kuò)展參數(shù),那么LESS匹配選擇器作為另一個(gè)選擇器部分。
|
7 |
選擇器插值擴(kuò)展
在多大程度上可以被連接到內(nèi)插選擇器。
|
8 |
作用域及擴(kuò)展@media
擴(kuò)展匹配選擇器只存在相同的媒體聲明中。
|
9 |
重復(fù)檢測(cè)
它不能檢測(cè)選擇器的重復(fù)。
|
S.N. |
類(lèi)型和說(shuō)明
|
---|---|
1 |
經(jīng)典用例
在Less中經(jīng)典的用例是用來(lái)避開(kāi)添加基類(lèi)。
|
2 |
減小CSS大小
擴(kuò)展用于移動(dòng)選擇器盡量要使用屬性,這有助于降低CSS生成代碼。
|
3 |
合并風(fēng)格/更高級(jí)的混入
使用擴(kuò)展我們可以結(jié)合特定選擇器相同的風(fēng)格到其他選擇器。
|