在使用rem对移动端界面布局进行适配时，需要完成px单位到rem单位的转换，这个过程中的除法运算对于界面中很多个标签时，是很麻烦的，但是CSS又不支持计算写法，那么有什么办法可以解决这个问题呢？

1、Less语法简介

• Less是一个CSS预处理器，Less文件后缀是.less
• 扩充了CSS语言，使CSS具备一定的逻辑性、计算能力

代码演示：

在VSCODE编译器中安装Easy LESS插件，.less后缀文件保存后会自动生成css文件

保存之后，在同级别会生成一个同名的后缀为.css的文件，如下

浏览器并不能识别Less代码，目前网页需要引入对应的CSS文件

2、Less语法的运算

• 加、减、乘直接书写表达式
• 除法需要添加小括号或者.

less代码

.box {
    width: 100 + 10px;
    width: 100 - 20px;
    width: 100 * 2px;

    width: (68 / 37.5rem);
    height: 29 ./ 37.5rem;
}

对应css代码

.box {
  width: 110px;
  width: 80px;
  width: 200px;
  
  width: 1.81333333rem;
  height: 0.77333333rem;
}

3、Less语法快速生成选择器

语法

父级选择器{
		子级选择器{
		}
}

生成对应css代码

父级选择器 子级选择器{
}

样例图

&符号表示当前选择器，在后代中存在&符号不会生成后代

4、Less变量设置属性值

方法：把属性的值（比如颜色）提前存储到一个容器，设置属性值为这个容器名

语法：
1.定义变量：@变量名:值
2. 使用变量:CSS属性:@变量名

样例Less代码

// 1. 定义. 2.使用
@colora:green;

.box {
    color: @colora;
}
.father {
    background-color: @colora;
}
.aa {
    color: @colora;
}

对应css代码

.box {
  color: green;
}
.father {
  background-color: green;
}
.aa {
  color: green;
}

5、Less文件的导入与导出

5.1 导入

语法：@import "文件路径";

样例代码

@import './01-体验less.less';
@import './02-注释';

5.2 导出

Less 语法修改导出CSS问价的路径

方法：

1. 配置EasyLess插件，实现所有Less有相同的导出路径

2. Less语法控制当前文件导出路径
   在代码头部直接添加//后面跟上导出路径（也可以命名文件名）

// out: ./qqq/daqiu.css

// out: ./abc/

.box {
    color: red;
}

5.3 禁止导出

在Less文件第一行添加：// out:false