LESS - 擴充套件

Extend 是一個 LESS 偽類，它使用 :extend 選擇器在一個選擇器中擴充套件其他選擇器的樣式。

示例

以下示例演示了在 LESS 檔案中使用 extend：

extend_syntax.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         <p>Hello!!!!!</p>
      </div>
   </body>
</html>

接下來，建立 style.less 檔案。

style.less

h2 {
   &:extend(.style);
   font-style: italic;
}

.style {
   background: green;
}

您可以使用以下命令將 extend.less 檔案編譯為 extend.css：

lessc style.less style.css

執行上述命令；它將自動建立包含以下程式碼的 style.css 檔案：

style.css

h2 {
   font-style: italic;
}

.style,
h2 {
   background: blue;
}

輸出

按照以下步驟檢視上述程式碼的工作原理：

將上述 html 程式碼儲存在 extend_syntax.htm 檔案中。
在瀏覽器中開啟此 HTML 檔案，將顯示以下輸出。

Extend 語法

Extend 可以放在規則集中或附加到選擇器上。它類似於一個偽類，包含一個或多個類，這些類以逗號分隔。可以使用可選關鍵字 all 作為每個選擇器的字尾。

示例

以下示例演示了在 LESS 檔案中使用 extend 語法：

extend_syntax.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         
         <div class = "container">
            <p>Hello!!!!!</p>
         </div>
      
      </div>
   </body>
</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.htm 檔案中。
在瀏覽器中開啟此 HTML 檔案，將顯示以下輸出。

下表列出了您可以在 LESS 中使用的所有型別的 extend 語法：

序號	型別及說明
1	附加到選擇器的 Extend Extend 連線到一個選擇器，看起來像一個偽類，引數為選擇器。
2	規則集內的 Extend &:extend(selector) 語法可以放在規則集的主體中。
3	擴充套件巢狀選擇器使用 extend 選擇器匹配巢狀選擇器。
4	與 Extend 的精確匹配預設情況下，extend 會查詢選擇器之間的精確匹配。
5	nth 表示式 nth 表示式的形式在 extend 中很重要，否則它會將選擇器視為不同的。
6	Extend "all" 當在 extend 引數的最後識別到關鍵字 all 時，LESS 會將該選擇器匹配為另一個選擇器的一部分。
7	帶有 Extend 的選擇器插值 extend 可以連線到插值選擇器。
8	作用域/在 @media 中使用 Extend Extend 僅匹配存在於相同媒體宣告中的選擇器。
9	重複檢測它無法檢測選擇器的重複。

以下是 Extend 的用例型別

序號	型別及說明
1	經典用例經典用例用於避免在 LESS 中新增基類。
2	減小 CSS 大小 Extend 用於將選擇器移動到您想要使用的屬性儘可能遠的地方；這有助於減少生成的 CSS 程式碼。
3	組合樣式/更高階的 Mixin 使用 extend，我們可以將特定選擇器的相同樣式組合到其他選擇器中。

列印頁面