LESS - 混合

混合類似於程式語言中的函式。混合是一組 CSS 屬性，允許您將一個類的屬性用於另一個類，並將類名作為其屬性。在 LESS 中，您可以像使用 CSS 樣式一樣，使用類或 ID 選擇器來宣告混合。它可以儲存多個值，並在需要時在程式碼中重複使用。

下表詳細演示了 LESS 混合的用法。

序號	混合用法及說明
1	不輸出混合可以透過在混合後面簡單地放置括號來使其在輸出中消失。
2	混合中的選擇器混合不僅可以包含屬性，還可以包含選擇器。
3	名稱空間名稱空間用於將混合分組到一個通用名稱下。
4	受保護的名稱空間當將保護應用於名稱空間時，僅當保護條件返回 true 時，才會使用由其定義的混合。
5	!important 關鍵字 !important 關鍵字用於覆蓋特定屬性。

示例

以下示例演示了 LESS 檔案中混合的用法：

<html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>LESS Mixins</title>
   </head>

   <body>
      <h1>Welcome to Tutorialspoint</h1>
      <p class = "p1">LESS is a CSS pre-processor that enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "p2">LESS is a dynamic style sheet language that extends the capability of CSS.</p>
      <p class = "p3">LESS is cross browser friendly.</p>
   </body>
</html>

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

style.less

.p1 {
   color:red;
}

.p2 {
   background : #64d9c0;
   .p1();
}

.p3 {
   background : #LESS520;
  .p1;
}

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

lessc style.less style.css

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

style.css

.p1 {
   color: red;
}

.p2 {
   background: #64d9c0;
   color: red;
}

.p3 {
   background: #LESS520;
   color: red;
}

輸出

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

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

呼叫混合時，括號是可選的。在上面的示例中，.p1(); 和 .p1; 兩個語句都執行相同操作。

列印頁面

序號	混合用法及說明
1	不輸出混合可以透過在混合後面簡單地放置括號來使其在輸出中消失。
2	混合中的選擇器混合不僅可以包含屬性，還可以包含選擇器。
3	名稱空間名稱空間用於將混合分組到一個通用名稱下。
4	受保護的名稱空間當將保護應用於名稱空間時，僅當保護條件返回 true 時，才會使用由其定義的混合。
5	!important 關鍵字 !important 關鍵字用於覆蓋特定屬性。