less基础

层级样式和单行注释

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
body {
    // 单行注释 不会解析到css
    /* 多行注释会解析到css */
    width: 100px;
    height: 100px;
    div {
        color: red;
    }

    >.box1 {
        width: 100px;
    }

    // 外层父元素 body:hover .box2
    &:hover {
        color: orange;
    }
}

less中定义使用变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 定义变量
@value: 100px;
@cc: box2;

// 使用变量
// 作为属性 @变量名
.box1 {
    width: @value;
}

// 作为类名 @(变量名) @{变量名}
.@(cc) {
    width: @a;
    background-image: url("@{cc}/1.png");
}

// 引用属性
.box2 {
    width: 200px;
    height: $width;
}

继承extend

1
2
3
4
5
6
7
8
.p1 {
    width: 200px;
    height: 200px;
}
// 继承p1的并扩展p2
.p2:extend(.p1) {
    color: red;
}

混合mixin

1
2
3
4
5
6
7
8
.p1 {
    width: 200px;
    height: 200px;
}
// 引用 p1的属性
.p2 {
    .p1();
}

创建混合

1
2
3
4
5
6
7
8
9
// 定义 （不会被解析到css）
.p4(){
    width: 100px;
    height: 200px;
}
// 实例
.p5 {
    .p4;
}

混合函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 创建混合函数
.test(@w,@h) {
    width: @w;
    height: @h;
    border: 1px solid #cba;
}
div {
    .test(200px,100px);
}

// 参数默认值
.test(@w:200px, @h:200px) {
    width: @w;
    height: @h;
    border: 1px solid #cba;
}

颜色平均值

1
2
3
div {
    color: average(red, yellow);
}

颜色变深

1
2
3
div {
    color: darken(#bfa, 20%);
}

数值运算

1
2
3
4
div {
    width: 100px + 100px;
    height: 100px - 100px;
}

模块化

1
2
3
4
5
@import "style2.less"

div {
    color: darken(#bfa, 20%);
}