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

Import Directives

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文件,得到如下輸出顯示。

Less導入指令