css预处理器 Less

less 是一个css预处理器，扩充了css语言，具备逻辑性和计算能力。支持变量、混合(Mixin)、函数、计算、循环、继承。
浏览器不能识别less代码，目前网页需要引入对应的css文件
vscode插件：Easy LESS，保存less文件后自动生成对应的css文件。

注释

• 单行
  //注释内容
  ctrl + /
• 块注释
  /* 注释内容 */

运算

• 加减乘除
  除法需要添加小括号或.

width:(100 / 4px); // 推荐
height: 100 ./ 4px;

less表达式有多个单位，生成的css文件中最终以表达式第一个单位为准

//a.less
height: (30px / 20rem);
// a.css
height: 10px;

嵌套

作用：快速生成后代选择器

// a.less
.father {
  color: red;
  .son {
    width: 200px;
  }
}
// a.css
.father{
  color: red;
}
.father .son {
    width: 200px;
}

特殊符号&：表示不生成后代选择器。

• 当前的选择器，代码写到谁的大括号里面就表示谁，不会生成后代选择器。
• 应用场景：配合hover伪类或者th-child结构的伪类使用

// a.less
.father {
  color: red;
  .son {
    width: 200px;
    a {
      color: green;
      &:hover { // a标签的伪类选择符
        color: blue;
      }
    }
  }
}
// a.css
.father{
  color: red;
}
.father .son {
    width: 200px;
}
.father .son a {
   color: green;
}
.father .son a:hover {
   color: blue;
}

变量

作用：存储数据，方便使用和修改
语法：
定义：@变量名：数据;
使用：css属性：@变量名;

//a.less

// 定义变量
@myColor: red;
//使用变量
.box{
  color: @myColor;
}

// a.css
.box{
  color: red
}

继承

:extend()
混合是直接拷贝, 继承是并集选择器

.child {
  font-size: 12px;
}
.child2 {
  font-weight: bold;
}
// parent继承了child的font-size
.parent {
  &:extend(.child); //继承单个
  color: red;
}
.parent {
  &:extend(.child, .child2); //继承多个
  color: red;
}
.parent {
  &:extend(.child):extend(.child2); //多继承
  color: red;
}
// 继承单个编译之后的css
.parent {
  font-size: 12px;
  color: red;
}

• 继承所有状态（如伪类选择器）
  all
  语法： 获得继承名：extend（继承部分名 all）{…}

导入

作用：导入less公共样式文件
语法：导入：@import "文件路径";
提示：less文件可以省略扩展名

@import './base.less'
@import './common'

被导入的文件不会生成css文件，只会生成当前文件对应的css文件。

导出

写法：在less文件的第一行添加// out: 存储路径
路径是文件夹名时，文件夹名后面需要加/

// out: ./index.css    // 导出到某个文件
或
// out: ./css/    // 导出到某个文件夹

禁止导出

写法：在less文件第一行添加 // out:false
使用场景：