在Less中,可以使用@import
语句导入外部Less文件或CSS文件的内容。
假设我们有一个less文件:myfile.less
.myclass{
color: blue;
}
.myclass1{
color: red;
}
我们在另外一个名为simple.less的文件中导入上面的myfile.less:
@import "myfile.less";
.myclass2
{
color: brown;
}
编译后输出CSS:
.myclass {
color: blue;
}
.myclass1 {
color: red;
}
.myclass2 {
color: brown;
}
Import 参数
import 语句可以指定一些参数,如下所示:
- reference: 只把导入的文件作为引用,不输出到CSS内容里。
- inline: 不处理直接将CSS复制到输出中。
- less: 不管文件扩展名是什么,都视为常规的less文件。
- css: 不管文件扩展名是什么,都视为常规的css文件。
- once: 只导入文件一次。
- multiple: 多次导入文件。
- optional: 如导入文件不存在,不会报错,继续编译。
注意: 你可以在@import语句中使用多个参数,用逗号分隔。
示例:
@import (css, optional) "simple.less";