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 文件中使用變量：

Example of Import Directives

Welcome to Yiibai Tutorials...

接下來，創建文件 import_dir.less。

import_dir.less

.myline {
font-size: 20px;
}

接下來，創建文件style.less。

style.less

@import "http://www.yiibai.com/less/import\_dir.less";
.myline {
color:#FF0000;
}

import_dir.less文件將從路徑 http://www.yiibai.com/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.htmll 文件。

• 在瀏覽器中打開該HTML文件，得到如下輸出顯示。