引入(important)
引入一个或多个 .less 文件,然后引入的这个文件中的所有变量都可以在当前的less项目中使用。
例子:
main.less文件
@wp:960px;
style.less文件
@import "main";
.content{
width:@wp;
}
编译结果
.content{
width:960px;
}
注意:引用 .css 文件会被原样输出到编译的文件中,所以在写less里面不能混合css文件中的样式
例子:
index.css文件
.color{
color:#ff6600;
}
style.less文件
@import "main";
@import "index.css"
.content{
width:@wp;
height:@wp;
.color; //不能混合css文件中的样式,这样写是错误的
}
可带参数
1.once 默认,只包含一次
2.reference 使用Less文件但不输出
3. inline 在输出中包含源文件(原样输出,不能使用里面的变量)但不加工它
4. less 将文件作为Less文件对象,无论是什么文件扩展名
5. css 将文件作为css文件对象,无论是什么文件扩展名
6. multiple 允许引入多次相同文件名的文件
例子
@import (reference) "main.less";
multiple
@import (multiple) "main.less";
@import (multiple) "main.less";
@import (multiple) "main.less";
编译结果
.colorsss{
color:darkgreen;
}
.colorsss{
color:darkgreen;
}
.colorsss{
color:darkgreen;
}
关键字(important)
在调用的混合集后面追加 !important
关键字,可以使混合集里面的所有属性都继承 !important
扫描二维码关注公众号,回复:
12404019 查看本文章

例子:
Less编写
.foo(@bg:#f5f5f5,@color:#900){
background:@bg;
color:@color;
}
.unimportant{
.foo();
}
.important {
.foo() !important;
}
编译结果
unimportant{
background:f5f5f5;
color:#990000;
}
.important{
background:#f5f5f5 !important;
color:#990000 !important;
}