LESS - 向Mixin傳遞規則集

描述

分離的規則集包含規則集，例如屬性、巢狀規則集、變數宣告、Mixin 等。它儲存在一個變數中，幷包含在另一個結構中；規則集的所有屬性都會複製到該結構中。

示例

以下示例演示如何在 LESS 檔案中向 Mixin 傳遞規則集：

passing_ruleset.htm

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

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web.</p>
      </div>
   </body>
</html>

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

style.less

@detached-ruleset: {
   .mixin() {
      font-family: "Comic Sans MS";
      background-color: #AA86EE;
   }
};

.cont {
   @detached-ruleset();
   .mixin();
}

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

lessc style.less style.css

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

style.css

.cont {
   font-family: "Comic Sans MS";
   background-color: #AA86EE;
}

輸出

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

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

作用域

分離規則集中的所有變數和 Mixin 在呼叫或定義規則集的任何地方都可用。否則，呼叫者和定義作用域預設情況下都可用。當兩個作用域都包含相同的 Mixin 或變數時，宣告作用域優先。分離規則集的主體在宣告作用域中定義。在分離規則集從一個變數複製到另一個變數後，它的作用域不會改變。

下表列出了所有型別的作用域：

序號	型別和描述
1	定義和呼叫者作用域可見性變數和 Mixin 在分離規則集中定義。
2	引用不會修改分離規則集的作用域僅給出引用，規則集不會訪問任何新作用域。
3	解鎖將修改分離規則集的作用域分離規則集可以透過匯入到其中來訪問作用域。

列印頁面

序號	型別和描述
1	定義和呼叫者作用域可見性變數和 Mixin 在分離規則集中定義。
2	引用不會修改分離規則集的作用域僅給出引用，規則集不會訪問任何新作用域。
3	解鎖將修改分離規則集的作用域分離規則集可以透過匯入到其中來訪問作用域。