less：css的预处理器，方便我们快速开发
使用方式：
1.新建一个less文件（后缀名就是.less）
2.按照less的语法要求 在less文件中编写代码
3.通过 easy less 插件（vscode） 来编译less文件
4.会自动生成对应的 css文件
5.在网页中直接引入 编译好的css文件即可
less变量：
// @+变量名，用英文（尽量有语义 ）
@color:red;
less运算：
// css需要calc() 配合计算，less 可以直接计算
div {
font-size: 20px + 30px;
width: 100px - 60px;
height: 50px * 2;
// 除法例外，需要用 ()，否则无法生效
height: (50px / 2)
}
less混合：
/*
需求 有三个 元素 想要使用一张精灵图
1 A元素 图片位置 x y (-300px,30px)
1 B元素 图片位置 x y (-400px,60px)
1 C元素 图片位置 x y （-50px,100px）
用 less的mixin来解决 用法有点类似变量）
*/
.aaa() {
background-image: url("./2.png");
background-size: 100%;
background-repeat: no-repeat;
}
div {
// A 元素 图片位置 x y （-300px,30px）
// 2.使用
.aaa();
background-position: -300px 30px;
}
p {
.aaa();
background-position: -400px 60px;
}
a {
.aaa();
background-position: -50px 100px;
}
less混合-进阶：
/*
需求 有三个 元素 想要使用一张精灵图
1 A元素 图片位置 x y (-300px,30px)
1 B元素 图片位置 x y (-400px,60px)
1 C元素 图片位置 x y （-50px,100px）
用 less的mixin来解决 用法有点类似变量）
*/
.aaa(@x, @y) {
background-image: url("./2.png");
background-size: 100%;
background-repeat: no-repeat;
background-position: @x @y;
}
div {
// A 元素 图片位置 x y （-300px,30px）
// 2.使用
.aaa(-300px, 30px);
}
p {
.aaa(-400px,60px);
// background-position: -400px 60px;
}
a {
.aaa(-50px,100px);
// background-position: -50px 100px;
}
less嵌套：
div {
.header {
>a {
}
}
}
// 伪元素用法
.top {
&::before {
content: "你好";
}
}
\
