目录
一、初识Less
less是一门CSS预处理语言
less是一个CSS的增强版，通过less可以编写更少的代码实现更强大的样式
在less中添加了许多新的特性，像对变量的支持、对mixin的支持...
less的语法大体上和css一致，但是less中添加了许多对css的扩展， 所以浏览器无法直接执行less代码，要执行必须先将less转换为css，然后由浏览器执行
二、Less的语法
1.注释
Less中的注释以 // 开头，是单行注释
//less中的单行注释，注释中的内容不会被解析到css中2.变量
变量，在变量中可以存储一个任意的值，并且我们可以在需要时，任意的修改变量中的值
变量的语法：@变量名
作为变量名时，如果是直接使用，则以 @变量名 的形式使用即可
.box4{
width: @a;
height: @a;
background-color: @b;
}作为类名，或者一部分值使用时必须以 @{变量名} 的形式使用
.@{c}{
width: @a;
height: @a;
background-image: url("@{c}/1.png");
}变量发生重名时，会优先使用比较近的变量
可以在变量声明前就使用变量
@d:200px;
@d:300px;
div{
// 变量发生重名时，会优先使用比较近的变量
@d:120px;
width: @d;
height: @e;
}
// 可以在变量声明前就使用变量
@e:300px;
div{
width: 300px;
height: $width;
}
3.父元素
父元素中可以嵌套子元素，&符号表示外层的父元素
.box1 {
.box2 {
color: red;
}
>.box3 {
color: red;
}
// 为box1设置一个hover
//&表示外层的父元素
&:hover {
color: orange;
}
div & {
width: 30px;
}
}编译后的CSS文件如下：
4.扩展
extend()对当前选择器扩展指定选择器的样式（选择器分组）
.p1 {
width: 100px;
}
.p2:extend(.p1) {
height: 20px;
}编译后的CSS文件如下：
直接对指定的样式进行引用，这里就相对于将p1的样式在这里进行了复制（mixin 混合）
.p1 {
width: 100px;
}
.p3{
// 直接对指定的样式进行引用，这里就相对于将p1的样式在这里进行了复制
// mixin 混合
.p1()
}编译后的CSS文件如下：
使用类选择器时可以在选择器后边添加一个括号，这时我们实际上就创建了一个mixins
.p4(){
width: 400px;
height: 400px;
background-color: orange;
}
.p5{
.p4();
}编译后的CSS文件如下：
5.混合函数
混合函数 在混合函数中可以直接设置变量，调用混合函数时，需要按顺序传递参数，也可以使用键值对不按照顺序传递参数。
.test(@w,@h,@bg-color){
width: @w;
height: @h;
border: 1px solid @bg-color;
}
div{
.test(200px,200px,red)
// .test(@bg-color:red,@w:200px,@h200px,)
}编译后的CSS文件如下：
调用混合函数时也可以不传参数，但是必须要在混合函数中设置默认值，如下：
6.less中的运算
在less中所有的数值可以直接进行运算（加减乘除运算）
.box1{
width: 100px + 100px;
height: 100px*2;
background-color: red;
}编译后的CSS文件如下：
7.引入less文件
可以通过 import 来将其他的less引入到当前的less
@import "syntax.less";