Less引入和关键字（7）

引入（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

例子：
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;
}