实现在不同宽度的设备中，网页元素尺寸等比缩放效果
目录
一、less布局是什么？
1.基本使用
代码同步展示:
less代码段:
.father {
color: red;
width: 10 * 37.5px;
.son {
width: 100px;
}
}自动生成css代码段 :
.father {
color: red;
width: 375px;
}
.father .son {
width: 100px;
}2.插件安装 - EasyLess 
二、less语法
1.注释
单行注释:
// font-size: 30 ./ 37.5rem;块注释:
/* .box {
width: 40px;
width: 70px;
width: 375px;
height: 0.77333333rem;
width: 60px;
}
*/2.嵌套
& 表示当前选择器， 不会生成后代选择器, 一般配合伪类、伪元素、结构伪类
代码同步展示:
less代码段:
.father {
color: pink;
.son {
width: 50px;
color: blue;
.a {
color: green;
&:hover {
color: red;
}
}
// 鼠标悬停
// a:hover {
// color: red;
// }
}
}自动生成css代码段:
.father {
color: pink;
}
.father .son {
width: 50px;
color: blue;
}
.father .son .a {
color: green;
}
.father .son .a:hover {
color: red;
}3.运算
作用: 完成常用数学计算
写法:
代码同步展示:
less代码段:
.box {
width: 10 + 30px;
width: 100 - 30px;
width: 10 * 37.5px;
// 除法 () .
// 29
height: (29 / 37.5rem);
// font-size: 30 ./ 37.5rem;
// 如果一个表达式有多个单位,以第一个为准
width: 50px + 10rem;
}自动生成css代码段:
.box {
width: 40px;
width: 70px;
width: 375px;
height: 0.77333333rem;
width: 60px;
}4.变量
作用: 存储数据，方便修改和使用
用法:
代码同步展示:
less代码段:
@color:red;
p {
color: @color;
}
div {
background-color: @color;
}
a {
color: @color;
}自动生成css代码段:
p {
color: red;
}
div {
background-color: red;
}
a {
color: red;
}5.导入
作用: 引入其他less文件,如果导入的文件是less文件,可以省略后缀
写法:
代码同步展示:
less代码段:
// @import "./01-体验less.less";
@import "./01-体验less";
// @import "路径";自动生成css代码段:
.father {
color: red;
width: 375px;
}
.father .son {
width: 100px;
}6.导出
01: 控制所有Less导出路径
修改EasyLess插件
less代码段:
// out: ./dwt/xw.css
// out: ./css/
// css/ 表示css文件夹02: 单独控制某个Less文件导出路径
less文件第一行添加 // out：路径
如果是文件夹 : 文件夹名/
less代码段:
// out: false
