less

解析less:

• 方式一：在webpack中对所有.less文件，使用less-loader，将.less文件转化成.css文件
• 方式二：如果你使用vscode编辑器，可安装Easy LESS插件，该插件可在你保存.less文件时，自动生成一个同名的.css文件
• 方式三：先引入我们的.less文件，然后再引入
• 方式四：执行命令npm install -g less，再执行命令lessc styles.less styles.css，编译出我们想要的.css文件

less语法：

1. 兼容css。所以可以在less中编写所有的css代码；
2. 定义变量。@变量名：变量值；
3. 嵌套。其中&表示当前选择器的父级

.container {
    .box1 {
        font-size: 14px;
    }
    
    &.title {
        font-weight: 400;
    }
}

4. 运算。可以使用算术运算符+、-、*、/对任何数字、颜色或变量进行运算，而且在进行运算时会进行单位换算，以最左侧操作数的单位为准，如果单位换算无效或失去意义，则忽略单位

.box {
    height: 100px + 10%;
    background-color: #ff0000 + #00ff00;
}

5. 混入。混入在没有参数的情况下，小括号可以省略，但不建议这样做

.blackBackground {
    bakcground-color: #000;
}

.box_border(@borderWidth: 5px, @borderColor: purple) {
    border: @borderWidth solid @borderColor;
}

.box {
    width: 200px;
    height: 200px;
    
    .blackBackground();
    .box_border(10px, orange);
}

6.映射。

.colors {
    primaryColor: #f45678;
}

.box {
    color: .colors[primaryColor];
}

7. 混入和映射结合。混入也可以当作一个自定义函数来使用。

.pxToRem(@px) {
    result: (@px / @htmlFontSize) * 1rem;
}

.box {
    width: .pxToRem(100)[result];
    font-size: .pxToRem(10)[result];
}

8.继承。和mixins作用类似，用于复用代码。继承代码最终会转化成并集选择器。

.bordered {
    border: 2px solid #fff;
}

.box {
    &:extend(.bordered);
}
// 最终转化成下面代码
.bordered,
.box {
    border: 2px solid #fff;
}

9.内置函数。

.box {
    color: color(red); // 将red转成RGB的值
    width: convert(100px, "in"); // 单位的转换
    font-size: ceil(18.5px); // 数学函数
}

10.作用域。在查找一个变量时，首先在本地查找变量和混合。如果找不到，则从父作用域继承。

.box {
    .inner {
        font-size: @fontSize;
    }
    
    @fontSize: 16px;
}

11.注释。块注释和行注释都可以使用。 12.导入。导入的方式和css的用法一致。导入一个.less文件，此文件中的所有变量就可以全部使用了。如果导入的是.less扩展名，则可以将扩展名省略掉。