在使用
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问价的路径
方法:
- 配置EasyLess插件,实现所有Less有相同的导出路径
- Less语法控制当前文件导出路径
在代码头部直接添加//
后面跟上导出路径(也可以命名文件名)
// out: ./qqq/daqiu.css
// out: ./abc/
.box {
color: red;
}
5.3 禁止导出
在Less文件第一行添加:// out:false