Less擴展附加到選擇器

擴展連接到一個選擇器，類似於具有選擇器參數的僞類。當規則集有許多選擇器，然後關鍵字 extend 可以在任何選擇器的應用。以下是用於定義在代碼的範圍的格式。

• 選擇器後擴展。 [Eg: pre:hover:extend(div pre)]

• 允許空格在選擇器和擴展之間 [Eg: pre:hover :extend(div pre)]

• 允許多個擴展[Eg: pre:hover:extend(div pre):extend(.bucket tr) 或 pre:hover:extend(div pre, .bucket tr)]

• 擴展必須在選擇器的末尾來定義。 pre:hover:extend(div pre).nth-child(odd) 類型是不允許的。

示例

下面的例子演示了使用擴展連接在LESS文件選擇器：

extend_syntax.html

接下來，創建文件style.less

style.less

.style,
.container:extend(.img){
background: #BF70A5;
}
.img{
font-size: 45px;
font-style: italic;
}

你可以編譯 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: 45px;
}

輸出結果

讓我們來執行以下步驟，看看上面的代碼工作：

• 保存上面的 html 代碼到 extend_syntax.html 文件。

• 在瀏覽器中打開該HTML文件，得到輸出如下顯示。