Less匯入指令 - tw511教學網

@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 Yiibai Tutorials...</p>
</body>
</html>

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

import_dir.less

.myline {
 font-size: 20px;
}

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

style.less

@import "h/";
.myline {
  color:#FF0000;
}

import_dir.less檔案將從路徑 h/ 匯入到 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.htmll 檔案。
在瀏覽器中開啟該HTML檔案，得到如下輸出顯示。