Less变量、混合

Less特性

注释

// 注释内容 此注释不会编译输出到CSS文件中
/* 注释内容 */ 此注释会编译输出到CSS文件中

变量

Less中使用@变量名定义变量。需要注意的是，作为属性及选择器的时候，变量名需要放在{}中。
1.作为属性

@bg: background-color;
.box{
    width: 600px;
    height: 400px;
    @{bg}: #f2f2f2;
}

2.作为属性值

@w: 400px;
.box{
    width: 600px;
    height: @w;
}

3.作为选择器

@bx: box;
.@{box} {
    width: 600px;
       height: 400px;
}

`&`的作用

&可以添加伪类规则，如当鼠标移入一个元素的时候改变其背景颜色，如下：

.box{
    width: 600px;
    height: 400px;
    background-color: pink;
    &:hover{
        background-color: deeppink;
    }
}

编译后的CSS如下：

.box{
    width: 600px;
    height: 400px;
    background-color: pink;
}
.box:hover{
    background-color: deeppink;
}

混合（mixin）

混合是将一个规则集引入到另一个规则集的一种方式

一、普通混合

1.普通混合：没有参数且混合名后不加()的混合
2.普通混合会被编译输出到css文件中
3.普通混合若要不编译输出到css文件中，需要在混合名后加上一对()

示例：

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
}

.parent{
    position: absolute;
    width: 600px;
    height: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: skyblue;
    .son1{
        .centered();
        width: 200px;
        height: 200px;
        margin-top: -100px;
        margin-left: -100px;
        background-color: pink;
    }
    .son2{
        .centered();
        width: 100px;
        height: 100px;
        margin-top: -50px;
        margin-left: -50px;
        background-color: deeppink;
        &:hover{
            background-color: aquamarine;
        }
    }
}

二、带参数的混合

1.带参数的混合不会编译输出到css文件中。
2.使用带参数的混合时，参数的个数及位置必须一一对应，否则可能会造成实参与形参类型不对应情况，如.centered(orange,300px,300px)这种情况就会发生第一个颜色值赋给了宽度，第三个长度值赋给了颜色的情况。
3.若实参个数与形参个数不对应，会编译报错，实参类型与形参类型不对应编译不会报错。

示例：

.centered(@w,@h,@c) {
    position: absolute;
    top: 50%;
    left: 50%;
    width: @w;
    height: @h;
    margin-top: -(@h/2);
    margin-left: -(@w/2);
    background-color: @c;
}

.parent{
    position: absolute;
    width: 600px;
    height: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: skyblue;
    .son1{
        .centered(300px,300px,orange);
    }
    .son2{
        .centered(100px,100px,palegreen);
        &:hover{
            background-color: aquamarine;
        }
    }
}

三、带参数且有默认值的混合

1.使用@h: 100px这种形式可指定某个形参的默认值
2.调用混合的时候，指定默认值的形参可不必传入实参，编译不会报错
3.这类混合通常与命名参数一起使用，否则可能出现实参与形参个数不对应的情况。如下示例，若不使用命名参数，且希望height使用默认值，那么没有办法能办到，只能借助于命名参数
4.命名参数可以使得实参与形参的位置不必一一对应

.centered(@w,@h:100px,@c) {
    position: absolute;
    top: 50%;
    left: 50%;
    width: @w;
    height: @h;
    margin-top: -(@h/2);
    margin-left: -(@w/2);
    background-color: @c;
}

.parent{
    position: absolute;
    width: 600px;
    height: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: skyblue;
    .son1{
        // height使用默认值
        .centered(@w: 300px,@c: orange);
    }
    .son2{
        .centered(100px,100px,palegreen);
        &:hover{
            background-color: aquamarine;
        }
    }
}

四、模式匹配

1.作用类似于if-else代码块，可以根据传入的参数匹配调用混合
2.@_可匹配任意字符
3.匹配参数的位置可在第一位，也可在任意位置

triangle.less文件内容


.triangle(@c,@_,@w){
    position: absolute;
    width: 0px;
    height: 0px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    overflow: hidden;
    border-width: @w;
}
.triangle(@c,T,@w) {
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent @c transparent;
}
.triangle(@c,R,@w) {
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent @c;
}
.triangle(@c,B,@w) {
    border-style: solid dashed dashed dashed;
    border-color: @c transparent transparent transparent;
}
.triangle(@c,L,@w) {
    border-style: dashed solid dashed dashed;
    border-color: transparent @c transparent transparent;
}

引用triangle.less文件的文件内容

@import "triangle.less";

.box{
    .triangle(pink,L,200px);
}

.triangle(pink,L,200px)先匹配.triangle(@c,@_,@w)，然后再匹配.triangle(@c,L,@w)，最后把匹配到了两个混合中的属性编译输出css文件中