擴展連接到一個選擇器，類似於具有選擇器參數的偽類。當規則集有許多選擇器，然後關鍵字 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
<!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,
.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檔，得到輸出如下顯示。
上一篇：
Less合併風格及高級混入
下一篇：
Less擴展內部規則集