LESS - 匯入指令

描述

@import 指令用於在程式碼中匯入檔案。它將 LESS 程式碼分散到不同的檔案中，並允許輕鬆維護程式碼結構。您可以在程式碼中的任何位置放置@import 語句。

例如，您可以使用@import 關鍵字匯入檔案，例如@import "file_name.less"。

副檔名

您可以根據不同的副檔名使用@import 語句，例如：

如果您使用的是.css 副檔名，則它將被視為 CSS，並且@import 語句保持不變。
如果它包含任何其他副檔名，則它將被視為 LESS 並會被匯入。
如果沒有 LESS 副檔名，則會附加幷包含為匯入的 LESS 檔案。

@import "style";      // imports the style.less
@import "style.less"; // imports the style.less
@import "style.php";  // imports the style.php as a less file
@import "style.css";  // it will kept the statement as it is

示例

以下示例演示了在 SCSS 檔案中使用變數：

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

   <body>
      <h2>Example of Import Directives</h2>
      <p class = "myline">Welcome to Tutorialspoint...</p>
   </body>
</html>

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

import_dir.less

.myline {
   font-size: 20px;
}

現在，建立style.less 檔案。

style.less

@import "https://tutorialspoint.tw/less/import_dir.less";
.myline {
   color:#FF0000;
}

import_dir.less 檔案將從路徑https://tutorialspoint.tw/less/import_dir.less匯入到style.less 檔案中。

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

lessc style.less style.css

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

style.css

.myline {
   font-size: 20px;
}

.myline {
   color: #FF0000;
}

輸出

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

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

列印頁面