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