一、混合:
什么是less中的混合(Mixin)?将需要重复使用的代码封装到一个类中,在需要使用的地方调用封装好的类即可,在预处理的时候less会自动将用到的封装好的类中的代码拷贝过来,本质就是ctrl+c --> ctrl + v。
less中混合的注意点:如果混合名称的后面没有(),那么在预处理的时候会保留混合的代码(意思是在输出的css中,会含有.center这部分代码),如果混合名称的后面加上(),那么在预处理的时候不会保留混合的代码,(意思是在输出的css中,不会含有.center这部分代码,但是调用它的其他类还是复制这部分代码过来了)。
.center{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.center(){
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
1、带参数混合:
在LESS中,你还可以像函数一样定义一个带参数的属性集合。
.whc(@w, @h, @c){
width: @w;
height: @h;
background: @c;
}
2、带参数的混合, 并且带默认值:
.whc(@w:100px, @h:100px, @c:pink){
width: @w;
height: @h;
background: @c;
}
.box1{
//width: 200px;
//height: 200px;
//background: red;
//.whc(200px, 200px, red);
// 这里是给混合的指定形参传递数据
.whc(@c:red);
}
.box2{
//width: 300px;
//height: 300px;
//background: blue;
.whc(300px, 300px, blue);
}
赋值通过冒号赋值,参数也是,不是等于号;
即使混合有三个参数,你可以只传一个,且可以指定给哪一个形参传值。
3、命名参数:
调用混合时在参数前面加上它自己的参数名(形参名)中间用逗号(,)隔开,如:
.center(@s,@c,@w){
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border-style:@s ;
border-color:@c ;
border-width:@w ;
}
.center(@c:black,@s:solid,@w:10px)
4、匹配模式:
就是通过混合的第一个字符串形参,来确定具体要执行哪一个同名混合。
通用的匹配模式
无论同名的哪一个混合被匹配了, 都会先执行通用匹配模式中的代码。
@_:表示通用的匹配模式
.triangle(@_, @width, @color) {
width: 0;
height: 0;
border-style: solid;
}
.triangle(Bottom, @width, @color) {
border-width: @width;
border-color: @color transparent transparent transparent;
}
.triangle(Left, @width, @color) {
border-width: @width;
border-color: transparent @color transparent transparent;
}
.triangle(Top, @width, @color) {
border-width: @width;
border-color: transparent transparent @color transparent;
}
.triangle(Right, @width, @color) {
border-width: @width;
border-color: transparent transparent transparent @color;
}
.box {
.triangle(Top, 50px, skyblue);
}
5、arguments:
捕捉用户所有传入的参数,然后拼接,同JavaScript中函数的arguments。
.box-shadow(@x: 0, @y: 0, @height: 3px, @width: 3px) {
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
box-shadow: @arguments;
}
.myclass {
.box-shadow(2px, 2px);
}
编译后:
.myclass {
-webkit-box-shadow: 2px 2px 3px 3px;
-moz-box-shadow: 2px 2px 3px 3px;
box-shadow: 2px 2px 3px 3px;
}
二、继承:
特点:
less继承方便代码模块化
继承不支持带参数
语法: 获得继承名:extend(继承部分名){…}
.base{
width: auto;
height: 50%;
text-align: center;
background: aqua;
}
.header:extend(.base){
/*header自身代码*/
padding: 0 auto;
}
编译后:
.base,
.header {
width: auto;
height: 50%;
text-align: center;
background: aqua;
}
.header {
/*header自身代码*/
padding: 0 auto;
}
继承所有状态(如伪类选择器)
语法: 获得继承名:extend(继承部分名 all){…}
.base{
width: auto;
height: 50%;
text-align: center;
background: aqua;
}
.base:hover{
background: red;
}
/*没有加all*/
.header:extend(.base){}
/*加入all*/
.footer:extend(.base all){};
编译后:
.base,
.header,
.footer {
width: auto;
height: 50%;
text-align: center;
background: aqua;
}
.base:hover,
.footer:hover {
background: red;
}
/*没有加all*/
/*加入all*/
三、避免编译:
有时候需要输出一些不正确的CSS愈发或者使用一些LESS不认识的专有语法。
要在输出这样的值,我们可以在字符串前加上一个~
.box {
width: ~"calc(300px - 30px)";
}
编译后:
.box {
width: calc(300px - 30px);
}
important提升优先级
.mixin() {
color: #900;
background: #F7BE81;
}
h2 {
.mixin() !important;
}
编译后:
h2 {
color: #900 !important;
background: #F7BE81 !important;
}