一文读懂Less的使用 || 详解

Less的使用：https://less.bootcss.com/#-functions-

一、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文件只会被导入一次

Tags：less 继承