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