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;
}

猜你喜欢

转载自blog.csdn.net/weixin_44679078/article/details/111414564