详解less用法，为什么比传统css强很多？

1. 什么是less

首先Less 就是一个 CSS 预处理器，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。让 CSS 具有动态性。用了less之后才发现它的功能比传统的css强大太多。

1.1 传统css的痛点

会出现选择器连带写太多层的问题。也就是嵌套多层最常见的就是一个类名占完一整行。
会出现代码无法复用的问题。
没有专门的作用域或者嵌套。

1.2 解决：使用css预处理器

1.2.1 sass 与 scss

2007年诞生，是最早出现的也是最成熟的css预处理器，拥有ruby社区的支持。

受到less的影响，已经进化到了全面兼容css的scss

1.2.2 less

2009年出现，受sass的影响较大，但是又能够使用css的语法，让大部分的开发者更加容易上手，less的出现也影响了sass演变到scss的时代。Bootstrap的底层就是less 包括React的UI框架AntDesign。

1.2.3 stylus

2010年诞生，来自node.js社区，主要用于给node项目提供css预处理支持，语法偏向python,使用率相对于scss和less少很多。

2. less的编译

less最终需要被编译为css运行于浏览中，包括部署到服务器中。

使用node环境，通过npm包下载less工具，使用工具对代码进行编译。
通过vscode插件来编译。
引入cdn的less编译代码，对less进行时事处理。
将less编译的js代码下载到本地，执行js代码堆less进行编译。

介于个人学习阶段的原因：只能通过VScode插件来编译。

3. 嵌套

3.1 &的妙用

&：代表当前/上一层选择器的意思，此处是 .container-list

// 需求：hover在container-list的时候，颜色变为红色
.wrapper {
    .container-list {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        // &代表所处的当前选择器
        &:hover {
            background-color: red;
        }
    }
}

3.2 混入混合 mixins

3.2.1 less具备计算能力，原生css不具备 (了解即可)

div {
    width: 100px + 50px;
    height: 150px;
    background-color: rgb(0,255,0) + rgb(0, 0, 255);
}

3.2.2 文本显示省略号的三大件

/* 文本是否换行 */
white-space: nowrap;
/* 隐藏文本 */
overflow: hidden;
/* 当文本超出边框时显示省略号 */
text-overflow: ellipsis;

3.2.3 自定义一个混入类，如函数一样调用即可

.white-ellipsis {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
}

.box1 {
    width: 200px;
    height: 200px;
    background-color: pink;
    // 使用混入
    .white-ellipsis();
}

3.2.4 自定义混入类练习

// 定义一个混入：要求应用该混入之后，元素能够具备5px 红色实线边框。
// 混入传参 => 了解即可
.main-border(@b-size: 5px, @b-color: red){
    border:@b-size solid @b-color; 
}

.box {
    width: 200px;
    height: 200px;

    // 2.使用混入
    // 如果直接使用混入，什么都不传入的情况下，会使用混入的默认值
    .main-border();
    // 传参
    // 50px 对应的就是混入中的第一个b-size变量，b-size变量的默认值是5px，
    // 但是因为我们自己传入了自定义的值，所以会覆盖掉默认值，最终b-size会渲染为50px
    // 同理，blue会覆盖b-color的默认值red，最终显示为蓝色
    // 而solid这个值是固定的，且并未对外暴露可替换接口，所以固定不变。
    .main-border(50px,blue);
}

4. 映射

需求：设置宽度为100px。

要使用box-size这个混入中的width的值100px。所以，先通过.box-size()找到混入规则，再使用[]将想要捕获的属性放在里面，就可以用了。

// 定义混入
.box-size {
    width: 100px;
    height: 100px;
}

.test {
    background-color: orange;
    width: .box-size()[width];
}

5. 继承 extend

继承语法：将box1里面的所有内容全部拿过来。

继承之后, box1 和 box2变成了并集选择器 => 你有的我也有

// 给box1定义了一个颜色
.box1 {
    width: 100px;
    height: 100px;
    // background-image:linear-gradient(red, yellow);
    // 内置函数 可以将英文的颜色转为十六进制的  了解即可
    background-color: color(orange);
}

.box2{
    &:extend(.box1);
}