擴展是一個 LESS 偽類，它通過擴展其他選擇器樣式在一個選擇器使用 :extend 選擇器。
示例
下麵的例子演示了在LESS檔使用擴展：
extend_syntax.html
<!doctype html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="style">
<h2>Welcome to zaixian zaixian</h2>
<p>Hello, You guys!</p>
</div>
</body>
</html>
接下來，創建檔 style.less
style.less
h2 {
&:extend(.style);
font-style: italic;
}
.style {
background: green;
}
你可以編譯extend.less檔使用以下命令來生成extend.css：
lessc extend.less extend.css
接著執行上面的命令，它會自動創建 style.css檔，下麵的代碼：
style.css
h2 {
font-style: italic;
}
.style,
h2 {
background: blue;
}
輸出結果
讓我們來執行以下步驟，看看上面的代碼工作：
-
保存上面的HTML代碼在 extend_syntax.html檔。
-
在流覽器中打開該HTML檔，得到如下輸出顯示。
擴展語法
擴展放入規則集或連接到一個選擇器。它類似於包含一個或多個類，它們是由逗號分隔的偽類。使用可選的關鍵字all，每個選擇器可以這樣遵循。
示例
下麵的例子演示了使用 LESS 檔的擴展語法：
extend_syntax.html
<!doctype html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="style">
<h2>Welcome to zaixian zaixian</h2>
<div class="container">
<p>Hello, You guys!</p>
</div>
</div>
</body>
</html>
接下來，創建檔 style.less
style.less
.style:extend(.container, .img)
{
background: #BF70A5;
}
.container {
font-style: italic;
}
.img{
font-size: 30px;
}
你可以編譯 style.less 檔使用以下命令來生成 style.css 檔：
lessc style.less style.css
接著執行上面的命令，它會自動創建 style.css檔，下麵的代碼：
style.css
.style {
background: #BF70A5;
}
.container,
.style {
font-style: italic;
}
.img,
.style {
font-size: 30px;
}
輸出結果
讓我們來執行以下步驟，看看上面的代碼工作：
-
保存上面的HTML代碼在 extend_syntax.html檔。
-
在流覽器中打開該HTML檔，得到如下輸出顯示。
下表列出了擴展語法，您可以在LESS 使用它的所有類型：
| S.N. |
類型和說明
|
|---|---|
| 1 |
擴展連接到一個選擇器，類似於具有選擇器作為參數的偽類。
|
| 2 |
擴展內部規則集
&:extend延長(選擇器)語法可以在規則集主體裏面放。
|
| 3 |
擴展嵌套選擇器
嵌套選擇器使用擴展選擇器匹配。
|
| 4 |
使用擴展精確匹配
默認情況下擴展外觀選擇器之間的精確匹配。
|
| 5 |
nth運算式
第n個運算式的形式在某種程度上很重要，否則，它對待選擇器將不同。
|
| 6 |
擴展"all"
當關鍵字 all 被最後確定在擴展參數，那麼LESS匹配選擇器作為另一個選擇器部分。
|
| 7 |
選擇器插值擴展
在多大程度上可以被連接到內插選擇器。
|
| 8 |
作用域及擴展@media
擴展匹配選擇器只存在相同的媒體聲明中。
|
| 9 |
重複檢測
它不能檢測選擇器的重複。
|
下麵是擴展類型的用例：
| S.N. |
類型和說明
|
|---|---|
| 1 |
經典用例
在Less中經典的用例是用來避開添加基類。
|
| 2 |
減小CSS大小
擴展用於移動選擇器儘量要使用屬性，這有助於降低CSS生成代碼。
|
| 3 |
合併風格/更高級的混入
使用擴展我們可以結合特定選擇器相同的風格到其他選擇器。
|
上一篇：
Less重複檢測
下一篇：
Less不輸出混合類型