Less的使用：-

一、Less的介绍

Less是一个较为流行的css预处理语言。支持变量、混合(Mixin)、函数、计算、循环等特点。由于Less是预处理语言，所以不能直接运行，需要先进行编译。

凡是能用css编写的效果，都可以用Less编写。Less中支持所有的css的语法，向下兼容。

常见预处理语言：LESS SASS stylus

二、Less语言的编译方式

vs code 中easy less安装

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 内置了多种函数用于转换颜色、处理字符串、算术运算等

十、命名空间和访问符

为了提供一些封装的目的，你希望对混合（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文件只会被导入一次