Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。
Less常用的重要功能有：
1.变量
2.cala计算
3.html样的选择器嵌套
4. &父选择器本身或父选择器伪类
1.变量
包括变量的定义，变量的引用，变量的计算
值变量
@width:5000px;
@height:300px;
@font_size:12px;
.textarea {
width:@width;
height:@height;
font-size:@font_size;
}
名称变量（选择器或属性名）
@width:5000px;
@height:300px;
@font_size:12px;
@name:.text;
@b_c:border-color;
.textarea {
width:@width;
height:@height;
font-size:@font_size;
}
@{name} {
@{b_c}: aqua;
}
2.calc计算
div{
@val: 0.20rem;
width: calc(~”100% - @{val}”);
}
编译成:
div {
width: calc(100% - 0.2rem);
}
3.选择器嵌套，引用
less的使用像html一样使用的嵌套结构，并且可以引用
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
//引用使用
#menu a {
color: #111;
.bordered();
}
.post a {
color: red;
.bordered();
}
4. &父选择器引用
在使用嵌套规则时，需要注意 & 符号。
当内层选择器前面没有& 符号时，它表示的是父选择器后面的后代选择器。
如果有& 时，表示的是父元素自身或父元素的伪类
.van-cell {
background-color: #007bff;
color: white;
&::after {
display: none;
}
.avatar {
width: 60px;
height: 60px;
background-color: #fff;
border-radius: 50%;
margin-right: 10px;
}
.username {
font-size: 14px;
font-weight: bold;
}
}
更多使用方式从官网查看：https://less.bootcss.com/#概览
伪类与伪元素介绍
伪元素： 使用::before ::after修饰，创建的一个有内容的虚拟容器。这个元素虽然逻辑上存在，但并不存在于实际的DOM树中，它是新创建的元素，这个新创建的元素叫“伪元素”。
伪类（xxx的伪类，如a:link）： 使用:link :hover修饰，它存在于DOM树中，逻辑上存在，但在DOM树上无须标识的“幽灵”标签。
:before/:after是Css2的写法，
::before/::after是Css3的写法
1.伪元素要配合content属性一起使用
2.伪元素不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
3.伪元素的特效通常要使用:hover伪类样式来激活
4.eg:当鼠标移在span上时，span前插入”duang”
<style>
span{
background: yellow;
}
span:hover::before{
content:"duang";
}
</style>
<span>222</span>
参考文章：https://blog.csdn.net/weixin_49115895/article/details/108683791
评论区