Less语法

目标：使用Less运算写法，完成px单位到rem单位的转换

• 思考：在px单位转换到rem单位过程中，哪项工作是最麻烦的？
• 答：除法运算。CSS不支持计算写法
• 解决方案：可以通过Less实现

目标：使用Less语法快速编译生成CSS代码

在.less文件中，可以书写css语法，less文件保存后，自动生成对应的css文件

• Less是一个CSS预处理器，Less文件后缀是.less
• 扩充了CSS语言，使CSS具备了一定的逻辑性、计算能力。
• 注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。
• Less是给开发者使用的，Css是给浏览器解析渲染的
  
  

Less-注释：

• 单行注释：
  – 语法：//注释内容
  – 快捷键：Ctrl + /
• 块注释：
  – 语法：/*注释内容*/
  – 快捷键：shift + alt + A

less代码：

// 我是单行注释,但css语法不支持这种单行注释


/* 
我是多行注释
快捷键：shift + alt + A 
*/
1
2
3
4
5
6
7

css代码：

/* 
我是多行注释
快捷键：shift + alt + A 
*/

1
2
3
4
5

Less-运算：

less代码：

.box {
    width: 100 + 50px;
    width: 200 - 20px;
    width: 3 * 10px;

    //除法运算1: (表达式）
    //width: (68 / 37.5rem);

    //注意点: 表达式如果有多个单位，以第一个单位为准
    //width: (68px / 37.5rem); -> px
    //提示：为了避免单位的冲突，推荐在表达式最后写最终的一个单位
    width: (68 / 37.5rem);


    //除法运算2: ./  这种写法vscode会提示错误，不推荐
    height: 29 ./ 37.5rem;

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

css代码：

.box {
  width: 150px;
  width: 180px;
  width: 30px;
  width: 1.81333333rem;
  height: 0.77333333rem;
}
1
2
3
4
5
6
7

Less-嵌套：

less代码：

.father {
    color:red;
    .son {
        color: blue;

        a {
            font-size: 18px;
             
            // 第二种方法：
            // &表示当前的选择器
            // 好处：可以让代码具有整体性，方便迁移（拷贝到其他地方）
            &:hover {
                color: green;
            }
        }
        
        //第一种写法：
        //伪类选择器和结构伪类选择器
        // 需求：鼠标悬停到a标签(:hover)
        // a:hover {
        //     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

css代码：

.father {
  color: red;
}
.father .son {
  color: blue;
}
.father .son a {
  font-size: 18px;
}
.father .son a:hover {
  color: green;
}

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

Less-变量：

注意：;不要忘记了！

less代码:

// 需求：将粉色 改成 绿色
// 解决： 将公共颜色定义成变量，统一设置和修改
// 节省时间，陪女朋友（呵呵~，然而并没有QAQ...）

// 1.定义变量
@fontColor: green;

// 2.使用变量

.box1 {
    // color:pink;‘
    color: @fontColor;
}

.box2 {
    // color:pink;
    color: @fontColor;
}

.box3 {
    // color:pink;
    color: @fontColor;
}

.box4 {
    // color:pink;
    color: @fontColor;
}

div {
    // color:pink;
    color: @fontColor;
}


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

css代码：

.box1 {
  color: green;
}
.box2 {
  color: green;
}
.box3 {
  color: green;
}
.box4 {
  color: green;
}
div {
  color: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Less-导入：

less代码：

//less推荐用法:
// 空格 和 分号
//注意点：如果导入的是less文件，后缀.less可以省略
@import './04-嵌套.less';
@import './05-变量';

// 方式二：(不推荐）
@import url(./03-计算.less);


1
2
3
4
5
6
7
8
9
10

css代码：

.father {
  color: red;
}
.father .son {
  color: blue;
}
.father .son a {
  font-size: 18px;
}
.father .son a:hover {
  color: green;
}
.box1 {
  color: green;
}
.box2 {
  color: green;
}
.box3 {
  color: green;
}
.box4 {
  color: green;
}
div {
  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
27
28

Less-导出：

less代码：

// out: ./css/

/* 使用代码A导出css文件，必须写在第一行才行，对就是上面类似注释的那一行
    注意: 那不是注释，原代码就是那样写...
    这个方法比用 全局设置指定路径导出css文件更加灵活，且优先级更高
    还可以修改名字,如：aaa.css 
    */

// out: ./css/aaa.css
1
2
3
4
5
6
7
8
9

Less-禁止导出：

less代码：

// out: false

/* 禁止导出less  在第一行写 代码如上 */
1
2
3