LESS - 變數懶載入作用域

描述

如果兩次定義同一個變數，則會搜尋並使用當前作用域中最後一次對該變數的定義。此方法類似於 CSS 本身，其中值是從定義中的最後一個屬性中提取的。

示例

以下示例演示了在 LESS 檔案中不同作用域中懶載入變數的使用：

<html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>LESS Lazy Loading in Different Scope</title>
   </head>

   <body>
      <div class = "myclass">
         <p>Welcome to Tutorialspoint</p>
         <p class="para1">LESS is a CSS pre-processor.</p>
      </div>
   </body>
</html>

現在建立檔案 style.less。

style.less

@var: 10;
.myclass {
   @var: 50;
   .para1 {
      @var: 30;
      font-size: @var;
      @var: 20;
   }
   font-size : @var;
}

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

lessc style.less style.css

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

style.css

.myclass {
   font-size: 50;
}

.myclass .para1 {
   font-size: 20;
}

輸出

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

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

less_variables.htm

列印頁面