今天来整理一下less
less 是一门 css 预处理语言，增加了变量、Mixin、函数等特性，使 css 更易维护和拓展。通常用在 vue 开发中。
less 与 css 简单语句的区别
less 与 css 简单语句的区别 （左边是 css，右边为 less）
可以看出 less 对 css 选择器做出了调整，row、com 等皆为 contain 的子集元素，在 less中可以直接在 contain 内对其进行设置，这种方式称为嵌套写法，减少代码量的同时，层次也更为清晰以上是对 less 的简单介绍，下面是对 less 的变量部分的常用语法
1 普通变量
语法：@变量名：变量值
例：//定义变量
@bgcolor：#fff；
@boxhight：50px；
//使用变量
.box{
color:@bgcolor;
Height:@boxhight;
}
2 在字符串中使用变量
语法：@变量名：变量值
例：//定义变量
@imge：”./img”
//使用变量
body{
background:url(“@image/1.png”)
}
3 属性变量
语法：
选择器{@{变量名}：值}
例：
@ccc：color
.wrap{@{ccc}:red
}
4 选择器常用变量
语法：
@{变量名}{}
例：
@bbox：#div
@{bbox}{
color:red
}
5 导入其他的 less
语法：
@变量名：地址
@inport”@{变量名}”
例：
@src：”./header.less”
@inport”@{src}”
补充：
1 变量作用域
每个 css 样式的{}都是一个作用域，可参照 js 的函数作用域理解
但通常情况下，最好使用全局变量，避免无法重复使用
例：
@color：red;
.wrap{
color: @color; //.wrap 自己作用域内没有 color 变量,所以用上一次作用域中的变量.
}
.box{
@color: @58a;
color: @color; //因为.box 自己作用域中有同名变量,就会先用自己作用域内变量的值.
}
2 变量的计算
变量的值可以参与计算
例：
@width：300px
.box{
width:@width - 100px//px 可以不写
}
3 变量名重复时
在变量被重复定义时，只会使用最后定义的变量，less 会从当前作用域向上搜索。这个行
为类似于 CSS 的定义中始终使用最后定义的属性值。
例：
.class{
@var:1;
@var:2;//one 选中的搜索.brass{
@var:2;
three:@var;//结果为 three:4;
@var:3;
@var:4;//three 选中的搜索
}
one:@var;//结果为one:2;
}
