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文件.
在浏览器中观察结果