less简介

less是一门css的预处理语言，是css增强版，通过less可以编写更少的代码实现更强大的样式。
在less中添加了许多的新特性：像对变量的支持、对mixin的支持......
less语法大体和css语法一致，但less中增添了许多对css的扩展，所以浏览器无法直接执行less代码，要执行必须将less转换为css，再由浏览器执行。
在vs code中有插件easy less，在保存时可以自动帮你把less转为css。
css原生也支持变量的设置。
--变量名：#bfa；
使用时用var(--变量名)；

html{
    --color:#fff;
    /* 在html中设置变量 */
}
.box1{
    background-color: var(--color);
}

calc()计算函数
例：clac(200px/2);
注：兼容性不好

less中的变量

可以在.box1中写.box2

.box1{
    background-color: #fff;
    .box2{
        font-size: 25px;
    }
}
// 这是less


.box1 {
  background-color: #fff;
}
.box1 .box2 {
  font-size: 25px;
}
/* 这是css*/

//是less中的单行注释，/**/css中的注释，内容会被解析到css中.
在变量中，可以存储一个任意的值。并且我们可以在需要时，任意的修改变量中的值。
变量的语法：@变量名:; 使用的时候内容就是@b
使用变量时，如果直接使用则@变量名的形式使用即可。
作为类名，属性名，或一部分值使用时必须以@{变量名}的形式使用。

@a:10px;
@b:20px;
@c:box2;
.box1{
    width: @a;
    height: @b;
}
.@{c}{
    width: @a;
//这是less


.box1 {
  width: 10px;
  height: 20px;
}
.box2 {
  width: 10px;
}
/*这是css*/

变量发生重名时，优先会用比较近的变量，可以在变量声明前使用变量.
后代可以直接写 子元素就加个>
为box1设置hover，&就表示外层的父元素。

.box1{
    background-color: #fff;
    >.box2{
        font-size: 10px;
    }
    &:hover{
        background-color: #000;
    }
}
// 这是less


.box1 {
  background-color: #fff;
}
.box1 > .box2 {
  font-size: 10px;
}
.box1:hover {
  background-color: #000;
}
/*这是css*/

:extend（）对当前选择器扩展指定选择器的样式(选择器分组)
.p2:extend(.p1){}
直接对指定样式进行引用 .p3

.p1{
    width: 10px;
}
.p2:extend(.p1){
    height: 20px;
}
.p3{
    .p1();
}
// 这是less


.p1,
.p2 {
  width: 10px;
}
.p2 {
  height: 20px;
}
.p3 {
  width: 10px;
}
/*这是css*/

使用类选择器可以在选择器后边加一个()这是我们实际上创建了一个混合器mixins。（类似就像一个变量？）
混合函数中可以直接设置变量。有点类似c语言的形参。

.test(@bc,@w,@h){
    width: @w;
    height: @h;
    background-color: @bc;
}
div{
    .test(#fff,100px,200px);
}
// 这是less

div {
  width: 100px;
  height: 200px;
  background-color: #fff;
}
/*这是css*/

average（）两个颜色取平均
darken（颜色，百分数）颜色加深

less补充

在less中 所有的数值都可以直接进行运算。
如：wideh:100px+100px;(+ - * /)
import 用来将其他的less来引入。 @import "./3.less";
可以在vscode中的easy less插件中找到less.compile。将大括号的内容复制。
打开设置->拓展->easy less ->在setting.json中编辑->在源代码后面加个, 然后粘贴进去。
其中compress表示压缩，sourceMap表示生成地图，out表示生成css文件。

Q.E.D.