LESS 导入指令
LESS 导入指令
@import指令用于导入代码中的文件,它将LESS代码扩展到不同的文件，可以轻松维护代码的结构,您可以将@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
例子
<!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文件.
/*import_dir.less*/
.myline {
font-size: 20px;
}接下来创建style.less文件.
/*style.less*/
@import "http://www.tutorialspoint.com/less/import_dir.less";
.myline {
color:#FF0000;
}import_dir.less 将从路径https://www.tutorialspoint.com/less/import_dir.less.导入style.less
使用下面的命令编译less文件
lessc style.less style.css
得到css文件
/*style.css*/
.myline {
font-size: 20px;
}
.myline {
color: #FF0000;
}输出
执行下面步骤
保存html代码到import_directives.html文件.
在浏览器中观察结果
