序

less是一门css的预处理语言

less

less是一门css的预处理语言
- less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式
- 在less中添加了许多的新特性：像对变量的支持、对mixin的支持… …
- less的语法大体上和css语法一致，但是less中增添了许多对css的扩展，
  所以浏览器无法直接执行less代码，要执行必须向将less转换为css，然后再由浏览器执行
- 在vscode中下载easy less插件，它可以将less准换成css，只需要.less和.css文件取相同的文件名即可

语法

变量

变量，在变量中可以存储一个任意的值
- 并且我们可以在需要时，任意的修改变量中的值
- 变量的语法： @变量名
- 作为变量时，如果是直接使用则以 @变量名的形式使用即可
- 作为类名，或者一部分值使用时必须以 @{变量名} 的形式使用
- 变量发生重名时，会优先使用比较近的变量
- 可以在变量声明前就使用变量
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  @a:200px;
  @b:#bfa;
  @c:box6;
  .box5{
  
  width: @a;
  color:@b;
  }
  .@{c}{
  width: @a;
  background-image: url("@{c}/1.png");
  }
  选择器

子元素选择器>

less:
.box1{
.box2{}
>.box3{}
}

css:
.box1 .box2 {}
.box1 > .box3 {}

& 表示外层(只向外一层)的父元素

:extend() 对当前选择器扩展指定选择器的样式（选择器分组）

less:
.p1{
    width: 100px;
    height: 200px;
}
.p2:extend(.p1){
    color: red;
}

css:
.p1,
.p2 {
width: 100px;
height: 200px;
}
.p2 {
color: red;
}

mixin 混合
- 直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行了复制
- 使用类选择器时可以在选择器后边添加一个括号，这时我们实际上就创建了一个mixins
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  less:
  .p3{
  .p1();
  }
  
  .p4(){
  width: 100px;
  height: 100px;
  }
  .p5{
  .p4;
  }
  
  css:
  .p3 {
  width: 100px;
  height: 200px;
  }
  .p5 {
  width: 100px;
  height: 100px;
  }
  混合函数
在混合函数中可以直接设置变量

还可以调用混合函数，按顺序传递参数

less:
.test(@w:100px,@h:200px,@bg-color:red){
width: @w;
height: @h;
border: 1px solid @bg-color;
}
div{
.test(300px);
}

css:
div {
width: 300px;
height: 200px;
border: 1px solid red;
}

平均值average()可以设置颜色为参数，取两个颜色中间的颜色
加深颜色darken(颜色，百分比)

other

@import用来将其他的less引入到当前的less
在less中所有的数值都可以直接进行运算

easy less配置

"less.compile": {
        "compress":  true,  // 是否压缩
        "sourceMap": true,  // 生成源码地图使less文件和css一一对应，调试的时候直接对应到less中的位置
        "out": true, // 生成css文件
    }