less：
css的预处理器 使用less快速编译生产css代码，让css具备逻辑性，计算能力**
**
**浏览器不认识less 网页引入对应的css文件
开始之前请配置好 vscode插件 Easy Less （加个空格防止搜不到）**
1.less注释
/*多行注释才会被编辑到css显示注释*///单行注释不会编译到css里
2.less计算：
**上期讲了rem的适配计算公式 每次是手动计算的
这里使用less直接写：
举例：设计稿是375 那么设置html{font-size：37.5px} 假设元素大小是30px
那么 30/37.5就是计算出来的rem
less里面带有计算 直接写width:(30/37.5rem)**
**
less语法：xxx.less
.nox{
width: 100+10px;
width: 100-10px;
width: 100*10px;
// 除法
// 方式1 less4.0支持
width:(100/10px);
//方式2 less4.0支持
width:100./10rem;
//less4.0之前的写法现在不支持
height:100/10rem;
}
自动保存后编译的css xxx.css
.nox {
width: 110px;
width: 90px;
width: 1000px;
width: 10px;
width: 10rem;
height: 100/10rem;
}
3.less嵌套
.box{
width: 100%;height: 20%;
.son{
width: 50%;height: 50%;
&::before{
background-color: green;
}
&:hover{
color: red;
}
}
&:hover{
color: red;
}
}css编译后结果
.box {
width: 100%;
height: 20%;
}
.box .son {
width: 50%;
height: 50%;
}
.box .son::before {
background-color: green;
}
.box .son:hover {
color: red;
}
.box:hover {
color: red;
}4.less变量
@color:red;
.box{
color:@color
}
.banner{
background-color: @color;
}css编译后结果
.box {
color: red;
}
.banner {
background-color: red;
}
5.less文件的导入
// css引入css文件 link
// less导入方式 @import 'base.less' .less后缀可以省略
@import './demo.less';6.less每一个文件默认导出到一个位置（全局配置）
/*
注意 此方式配置后是所新建的less文件默认导出在统一的文件夹
配置EastLess插件 所有less有相同的导出路径
vscode左下角点击 设置 -->设置-->搜索EasyLess -->setting.json编辑 添加代码
"less.compile": {
//默认导出的文件夹地址
"out":"../css/"
}*/
7.less自己的文件单独导出到某一个位置
注意out 之前加//
//想执行那个就把那个放在最上面
导出到commoncss.css的css代码里
// out: ./commoncss.css
导出到css文件夹里
//out:./css文件夹/ 8.禁止导出
// out: false
