一、Less的介绍
Less是一个较为流行的css预处理语言。支持变量、混合(Mixin)、函数、计算、循环等特点。由于Less是预处理语言，所以不能直接运行，需要先进行编译。
凡是能用css编写的效果，都可以用Less编写。Less中支持所有的css的语法，向下兼容。
常见预处理语言：LESS SASS stylus
二、Less语言的编译方式
https://blog.csdn.net/sun_dongliang/article/details/82750773
vs code 中easy less安装
https://blog.csdn.net/qq_42222342/article/details/106210176
Hbuilder自动编译需要先下载less插件
并打开插件配置，将onDidSaveExecution的值设置为true
三、Less中变量的使用(Variables)
使用@符号声明一个变量
1、变量作为css的属性值使用
@width:1200px;
@height:50px;
.box1{
width:@width;
height:@height;
}
编译后
.box1 {
width: 1200px;
height: 50px;
}
2、变量作为类名使用（需要将变量名加上大括号）
@selector:box2;
.@{selector}{
width:@width;
height:@height;
}
编译后
.box2 {
width: 1200px;
height: 100px;
}
3、变量作为路径使用（需要将变量名加上大括号）
@imgs:’../ES6/大转盘抽奖/img’;
.box3{
width:@width;
height:@height;
background:url(“@{imgs}/bg_lottery.png”)
}
编译后
.box3 {
width: 1200px;
height: 100px;
background: url(“../ES6/大转盘抽奖/img/bg_lottery.png”);
}
4、变量作为属性使用
@bg:background;
.box4{
width:@width;
height:@height;
@{bg}:green;
}
编译后
.box4 {
width: 1200px;
height: 100px;
background: green;
}
5、可变变量的使用（了解）
@a:’测试’;
@b:’a’;
.box4::after{
content:@@b;
}
编译后
.box4::after {
content: ‘测试’;
}
四、Less的extend伪类
extend是一个Less的伪类，他会合并它所在的选择和它匹配到的引用
示例一：
.box5 ul li{
//&代表父级元素
&:extend(.inline);
background:blue;
}
.inline{
width:@width;
height:@height;
}
编译后
.box5 ul li {
background: blue;
}
.inline,
.box5 ul li {
width: 1200px;
height: 100px;
}
示例二：
.banner{
color:red;
}
.nav:extend(.banner){
//background是.nav类名独有的css样式
background:green;
}
编译后
.banner,
.nav {
color: red;
}
//单独生成一个.nav的样式 他自己独有一个background
.nav {
background: green;
}
注意：extend会在选择器之间精准匹配
五、混合Mixins
1、混合’类’选择器或者’id’选择器（类选择器和id选择器的样式仍然能够正常显示）
//混合‘类选择’和’id’选择器
.color,#color{
width:@width;
height:@height;
color:red;
}
.box6{
//直接使用’类选择器’
.color();
}
.box7{
#color();
}
注意：当你调用混合集时，小括号可加可不加
编译后
//.color和#color设置的样式依然
.color,
#color {
width: 1200px;
height: 100px;
color: red;
}
.box6 {
width: 1200px;
height: 100px;
color: red;
}
.box7 {
width: 1200px;
height: 100px;
color: red;
}
2、创建混合集，但是不输出样式
方法：在混合集的名字后面加一个小括号
.radius(){
-webkit-border-radius:30px;
-moz-border-radius:30px;
-ms-border-radius:30px;
-o-border-radius:30px;
border-radius:30px;
}
.box8{
.radius()
}
编译后
.box8 {
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
}
3、混合集包含各种选择器
.my-mixins(){
&:hover{
background:green;
}
}
.box9{
.my-mixins();
}
编译后
.box9:hover {
background: green;
}
4、混合集内若设置!important,则所有的属性都继承!important
.foo(){
width:1200px;
height:100px;
background:pink;
}
.box10{
.foo()!important;
}
编译后
.box10 {
width: 1200px !important;
height: 100px !important;
background: pink !important;
}
5、mixins接收参数（将接收的参数传递给代码块）
.border(@color){
border:1px solid @color;
}
.box11{
.border(green)
}
编译后
.box11 {
border: 1px solid red;
}
6、mixins接受多个参数,多个参数之间采用逗号连接
.linear(@position,@start,@end){
background:-webkit-linear-gradient(@position,@start,@end);
background:-moz-linear-gradient(@position,@start,@end);
background:-o-linear-gradient(@position,@start,@end);
background:-ms-linear-gradient(@position,@start,@end);
background:linear-gradient(@position,@start,@end);
}
.box12{
.linear(top,red,orange)
}
编译后
.box12 {
background: -webkit-linear-gradient(top, red, orange);
background: -moz-linear-gradient(top, red, orange);
background: -o-linear-gradient(top, red, orange);
background: -ms-linear-gradient(top, red, orange);
background: linear-gradient(top, red, orange);
}
7、mixins中的when的使用
.mixin(@w){
width:@w;
}
//监听参数的情况
.mixin(@w) when (@w>=500px){
height:600px;
}
.mixin(@w) when (@w<500px){
height:300px;
}
.box16{
// .mixin(300px)
.mixin(500px)
}
编译后
.box16 {
width: 500px;
height: 600px;
}
8、循环的使用
.loop(@counter) when (@counter > 0) {
.loop((@counter – 1)); // next iteration
width: (10px * @counter); // code for each iteration
}
div {
.loop(5); // launch the loop
}
编译后
div {
width: 10px;
width: 20px;
width: 30px;
width: 40px;
width: 50px;
}
六、Less的嵌套
嵌套：选择器之间的嵌套，可以很大程度的减少代码量
1、选择器的嵌套
header{
width:@width;
height:@height;
ul{
li{
width:300px;
height:@height;
background:lightblue;
a{
color:black;
}
}
}
}
编译后
header {
width: 1200px;
height: 100px;
}
header ul li {
width: 300px;
height: 100px;
background: lightblue;
}
header ul li a {
color: black;
}
2、父级选择器
header{
ul{
li{
//&为父级选择器
&:hover{
background:pink;
}
}
}
}
编译后
header ul li:hover {
background: pink;
}
3、改变选择器的顺序(不推荐)
ul{
li{
//此时的&代表的是 ul li
.banner &{
color:red;
}
}
}
编译后
.banner ul li{
color: red;
}
4、组合所有的选择器列表（了解）
div,p{
border:1px solid black;
& &{
border-top:0;
}
}
编译后
div,
p {
border: 1px solid black;
}
div div,
div p,
p div,
p p {
border-top: 0;
}
七、运算
算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算
ul{
@width:1200px;
@margin:5px;
width:@width;
li{
width:@width/4-2*@margin;
margin:@margin;
}
}
编译后
ul {
width: 1200px;
}
ul li {
width: 290px;
margin: 5px;
}
注意：
1、运算时以最左侧的单位为准。运算时最好单位统一
2、若属性值之间有‘/’,则less默认当作除法运算
八、转义字符
转义前样式
.box13{
border-radius:30px/50px;
}
编译为
.box13 {
border-radius: 0.6px;
}
转义后的写法：在less中’/’会被当作除法
.box13{
border-radius:~’30px/50px’;
font:~’30px/1.5 微软雅黑’;
}
编译为
.box13 {
border-radius: 30px/50px;
font: 30px/1.5 微软雅黑;
}
九、函数
Less 内置了多种函数用于转换颜色、处理字符串、算术运算等
https://less.bootcss.com/functions/
十、命名空间和访问符
为了提供一些封装的目的，你希望对混合（mixins）进行分组
将一些混合（mixins）和变量置于 #bundle 之下，为了以后方便重用或分发
#bundle(){
.border(@c){
border:1px solid @c;
}
color:blue;
}
.box14{
//映射
color:#bundle[color];
//访问mixins
#bundle.border(black);
}
编译后
.box14 {
color: blue;
border: 1px solid black;
}
十一、作用域
Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。
@color:blue;
.box15{
color:@color;
p{
@color:red;
color:@color;
}
}
p{
@color:red;
编译后
.box15 {
color: blue;
}
.box15 p {
color: red;
}
十二、注释
方式一：
// 双斜杠注释（该注释内容不会被编译到css中）
方式二：
/**/ 该注释的内容会解析到css
十三、导入import
在标准的css中，@import必须放置在其他类型的规则之前
在Less中@import语法可以放置在任意的位置
语法：@import “文件路径”
/*导入的test.less的内容*/
@import “./test”;
注意：
1、less的@import的导入可以放置在任意位置
2、若导入的文件为.less后缀，则可以省略(其他文件后缀不能省略)
3、同一个less文件只会被导入一次