@import 指令用于导入代码中的文件.它将LESS代码分布在不同的文件上，并允许轻松维护代码结构.您可以将 @import 语句放在代码中的任何位置.
例如，您可以使用 @import 关键字导入文件as @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 Tutorialspoint...</p> </body> </html>
接下来，创建 import_dir.less 文件.
.myline {
font-size: 20px;
}现在，创建 style.less 文件.
@import"http://www.it1352.com/less/import_dir.less";
.myline {
color:＃FF0000;
}import_dir.less 文件将导入 style.less 文件来自路径 https://www.it1352.com/less/import_dir.less .
您可以使用以下命令编译 style.less 到 style.css ;
lessc style.less style.css
执行上述命令;它将使用以下代码自动创建 style.css 文件;
.myline {
font-size: 20px;
}
.myline {
color: #FF0000;
}按照以下步骤查看上述代码的工作原理;
将上述html代码保存在 import_directives.html 文件中.
在浏览器中打开此HTML文件，将显示以下输出.
