📐 Less 笔记

🗄doc: Getting started | Less.js (lesscss.org) (opens new window)

# Less 基本语法

代码注释

与 CSS 的注释分开，Less 的单行注释不会被解析到 CSS 文件中。

// Less 单行注释

/*
	CSS 中的注释
*/

1
2
3
4
5

# 嵌套关系

适用于父子元素的关系：

body {
    --height: calc(200px /2);
    --weight: 100px;

    div {
        height: var(--height);
        width: var(--weight);
    }

    .box1 {
        background-color: #bfa;
    }
  
    .box2 {
        background-color: red;

        .box3 {
            background-color: yellow;
        }

        >.box4 {
            background-color: green;
        }
    }
          
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

处理后的 CSS 文件：

body {
  --height: calc(200px / 2);
  --weight: 100px;
}
body div {
  height: var(--height);
  width: var(--weight);
}
body .box1 {
  background-color: #bfa;
}
body .box2 {
  background-color: red;
}
body .box2 .box3 {
  background-color: yellow;
}
body .box2 > .box4 {
  background-color: green;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 变量

可以存储一个任意的值，在需要时修改变量的值：

直接使用使用变量时，则以 @变量名 的形式使用即可
作为类名、属性名或者一部分值使用时，必须以 @{变量名} 的形式使用；
可以在变量声明前就使用变量（可以但不建议）；

@b1: box1;
@size: 200px;
@bc: background-color;
@bi: background-image;
@color: red;
@path: img;

.@{b1} {
    width: @size;
    height: $width;
    @{bc}: @color;
    @{bi}: url('@{path}/300/300');
}

1
2
3
4
5
6
7
8
9
10
11
12
13

处理后的 CSS 文件：

.box1 {
  width: 200px;
  height: 200px;
  background-color: red;
  background-image: url('img/300/300');
}

1
2
3
4
5
6

在 url 中需要使用变量需要使用引号包裹 @{…}

# 其他

使用 & 拼接；
伪元素的使用；
:extend() 拓展指定选择器的样式
.xx() 对指定选择器的样式引用，相当于复制样式（混合函数）；

@b1: box1;
@size: 200px;
@bc: background-color;
@bi: background-image;
@color: red;
@path: img;

.p1 {
    width: @size;
    height: $width;
    &-wrapper {
        background-color: #fff;
    }

    // &:hover {
    //     background-color: skyblue;
    // }
    // 伪元素可以直接使用不用 & 拼接
    :hover {
        background-color: skyblue;
    }
}

// 拓展 .p1 的样式
.p2:extend(.p1) {
    color: @color;
}

// 引用 .p1 的样式
.p3 {
    .p1();
}

// 混合函数创建
.p4() {
    width: @size;
    height: $width;
}

.p5 {
    .p4;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

处理后的 CSS 文件：

.p1,
.p2 {
  width: 200px;
  height: 200px;
}
.p1-wrapper {
  background-color: #fff;
}
.p1 :hover {
  background-color: skyblue;
}
.p2 {
  color: red;
}
.p3 {
  width: 200px;
  height: 200px;
}
.p3-wrapper {
  background-color: #fff;
}
.p3 :hover {
  background-color: skyblue;
}
.p5 {
  width: 200px;
  height: 200px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 混合函数

可以在括号内设置变量，指定默认值：

用法🌰：

.test (@w:200px, @h:100px, @bc:skyblue){
    width: @w;
    height: @h;
    background-color: @bc;   
}

// 使用混合函数
.p6 {
    // .test(200px, 100px, red) 在对应的参数位置传值
    // .test(@h:200px,@w:100px,@bc:red); // 写明对应属性，可变换顺序
    // .test(300px); // 只修改 @w 的值
    
    .test()
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

处理后的 CSS 文件：

.p6 {
  width: 200px;
  height: 100px;
  background-color: skyblue;
}

1
2
3
4
5

# 其他函数

average() 混合函数，生成中间值：

.h1 {
    color: average(skyblue, pink);
}

1
2
3

.h1 {
  color: #c3c7db;
}

1
2
3
4

darken() 混合函数

body{
    background-color: darken(#bfa, 50%);
}

1
2
3

body{
    background-color: #22aa00;
}

1
2
3

# 引入

使用 @import 引入其他 Less 文件 (.less)：

@import "style.less";
@import "syntax.less";

1
2

编辑

#CSS #Less

📢 上次更新: 2022/09/02, 10:18:16

← 📕 jQuery 笔记 🅱️ Bootstrap 使用笔记→