Less擴展

擴展是一個 LESS 僞類，它通過擴展其他選擇器樣式在一個選擇器使用 :extend 選擇器。

示例

下面的例子演示了在LESS文件使用擴展：

extend_syntax.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

接下來，創建文件 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

合併風格/更高級的混入

 

使用擴展我們可以結合特定選擇器相同的風格到其他選擇器。