LESS - 名稱空間和訪問器

描述

名稱空間用於將混合（Mixin）分組到一個公共名稱下。使用名稱空間，您可以避免名稱衝突並封裝一組混合，使其不受外部影響。

示例

以下示例演示了在 LESS 檔案中使用名稱空間和訪問器 -

<html>
   <head>
      <title>Less Namespaces and Accessors</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Namespaces and Accessors</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

現在建立 style.less 檔案。

style.less

.class1 {
   .class2 {
      .val(@param) {
         font-size: @param;
         color:green;
      }
   }
}

.myclass {
   .class1 > .class2 > .val(20px);
}

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

lessc style.less style.css

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

style.css

.myclass {
   font-size: 20px;
   color: green;
}

輸出

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

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

列印頁面