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

<!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.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檔案，得到輸出如下顯示。