less（超级详细）
目录
一、less简介
1、less是css的预处理语言
1.1、 Css短板
1.2、预处理语言的诞生
2、安装使用less
3、注释
二、变量
1、普通变量
2、变量作为选择器或者属性名
3、变量作为url
4、变量延迟加载
三、嵌套规则
1.基本嵌套规则
2.&的使用
四、混合
1.普通混合 （会编译到原生css中）
2.不带输出的混合
3.带参数的混合
4.带参数并且有默认值的混合
5.命名混合
6.匹配模式
7.arguments变量
五、运算
六、避免编译
七、继承
一、less简介
1、less是css的预处理语言
less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展
less的中文官网：http://lesscss.cn/
1.1、 Css短板
css作为一 标记性语言，给初学者的第一印象是简单易懂，毫无逻辑，不像编程该有的样子。语法更新时，浏览器的兼容问题比较麻烦
问题的诞生伴随着技术的兴起，在web发展的这几年，出现了预处理语言，
让css彻底变成了一 可以使用变量、循环、继承、自定义方法等多种特性的标记语言，逻辑性得以大大增强
1.2、预处理语言的诞生
其中常用的三 语言：Less、Sass、Stylus
（1）:sass诞生于2007年，Ruby编写，语言功能十分全面，国内外都很受欢迎，它的项目团队也很强大，是一款十分优秀的预处理语言
（2）： stylus诞生于2010年，来自Node.js社区，语法功能和sass不相伯
（3）:Less诞生于2009年，受Sass影响的一个开源项目，增加了变量，混合，函数等功能，让css更易维护，方便制作主体，扩充
2、安装使用less
| vscode 插件： Easy LESS 插件 |
| HBuilderX 安装插件 https://blog.csdn.net/weixin_54607027/article/details/121302710?spm=1001.21 01.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7E Rate-1.pc_relevant_antiscanv2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Ed efault%7ECTRLIST%7ERate-1.pc_relevant_antiscanv2&utm_relevant_index=2 第三种引入方法：运行时编译 这种编译方式不好，编译 面时，将less转成css，会影响，网站的性能 |
3、注释
/* 写法一：这是 css 的注释，css不会被看到，不会被编译到 文件中 */
*{写法二： 这是 的注释， css文件可以看到，会被编译到 文件中
margin: 0;
padding: 0;
}
二、变量
1、普通变量
语法：@变量名：样式值
作为普通属性值只来使用：直接使用@变量名
// 定义变量
@color:yellow;
@width:300px;
@height:300px;
#wrap{
width:@width;
height: @height;
border: 1px solid;
background-color: @color;
margin: 0 auto;
}
2、变量作为选择器或者属性名
//selector #wrap
声明 对应
@selector:#wrap;
@w:width;
@h:height;
@{selector}{//
使用时变量名必须使用大括号包裹
@{w}:@width;
@{h}: @height;
border: 10px double black;
background-color:@color ;
margin: 0 auto;
}
3、变量作为url
@url:"../img/img1.png";//
@selector:wrap; 定义图片引入路径
@color:red;
.@{selector}{
width: 200px;
height: 200px;
background-color:@color;
background: url(@url) no-repeat;
background-size: cover;
}
4、变量延迟加载
@var: 0px;
//
变量是块级作用域，一个括号代表一个作用域
.class {//
一个作用域
@var: 10px;
.brass {//
一个作用域
@var: 20px;
width: @var; // width: 30px;
读完块级作用域后，再去确定变量值
@var: 30px;
}
width: @var; //width： 10px；
}
三、嵌套规则
1.基本嵌套规则
它是一组 CSS 属性，允许将一个类的属性用于另一个类，并且包含类名作为其属性。 在 LESS 中，可以使用类或 id 选择器以与 CSS 样式相同的方式声明 mixin。 它可以存储多个值，并且可以在必要时在代码中重复使用。
2.&的使用
ul{
width: 400px;
li{
width: 25%;
a{
color: white;
}
// &表示上一级选择器
&:hover{
background-color:tomato;
}
}
}
四、混合
混合就是将一系列属性从一个规则集引入到另一个规则集的方式(ctrl c +ctrl v)
混合的定义，在less规则，明确指定.的形式来定义
1.普通混合 （会编译到原生css中）
//定义的 base普通混合，less编译为css文件后，会在css中显示
.base{
width: 100px;
height: 100px;
margin-bottom: 10px
}
#box1{
.base;
background: pink;
}
#box2{
.base;
background: deeppink;
}
2.不带输出的混合
//语法： base不会在css中输出混合
.base(){
width: 100px;
4height: 100px;
5margin-bottom: 10px
}
#box1{
.base;
background: pink;
}
#box2{
.base;
background: deeppink;
}
3.带参数的混合
//带参数的混合
//行参
.base(@w,@h,@color){
width: @w;
height: @h;
background-color: @color;
margin-bottom: 10px
}
//以下传入实参
#box1{
.base(100px,100px,red);
}
#box2{
.base(200px,200px,pink);
}
4.带参数并且有默认值的混合
//
//带参数的混合
//行参
.base(@w:100px,@h:100px,@color:yellow){
width: @w;
height: @h;
background-color: @color;
margin-bottom: 10px
}
//以下传入实参，参数是一一对应的，不能不写
#box1{
.base(100px,100px,red);
}
#box2{
.base(200px,200px,pink);
}
#box3{
.base;
}
5.命名混合
.base(@w:100px,@h:100px,@color:yellow){
width: @w;
height: @h;
background-color: @color;
margin-bottom: 10px
}
//写了命名混合的，就对应哪个变量，剩余的再对应
#box1{
.base(@w:200px,@color:red);
}
#box2{
.base(@w:200px,150px,red);
}
#box3{
.base;
}
6.匹配模式
可以定义一个混合库minx.less，在实际写less的时候，然后引入混合库
//定义混合库 arrows
// @_
每次调用 的时候，都调用它
.arrows(@_,@w,@C){
width: 0;
height: 0;
border-style:solid;
}
//参数一：匹配的名字
.arrows(Top,@w,@C){
border-color: @C transparent transparent transparent;
border-width:@w;
}
.arrows(Right,@w,@C){
border-color: transparent transparent transparent @C;
border-width:@w;
}
.arrows(Bottom,@w,@C){
border-color: transparent transparent @C transparent;
border-width:@w;
}
.arrows(Left,@w,@C){
border-color: transparent @C transparent transparent;
border-width:@w;
}
// 引入minx库，两种方式都可以
// @import url(./minx.less);
@import './minx.less';
#arrows{
.arrows(Right,@w:40px,@C:red)
}
7.arguments变量
.border(@w,@style,@c){
border: @arguments;// border: @w @style @c;
} 等价于
#wrap{
width: 200px;
height: 200px;
background: pink;
.border(10px,solid,red);
}
五、运算
@w:100px;
*{
margin: 0;
padding: 0;
}
#wrap{
//计算的双方，只要一方有单位就可以了
//+ - * /
width:@w+200;
height: 200px;
background: pink;
}
六、避免编译
*{
margin: 0;
padding: 0;
}
#wrap{
// calc()是css3的一个新增的功能，用来指定元素的 度
//
～''不编译，less原封不动，交给css 编译
width:~"calc(200px + 700px)";//css中显示width: calc(200px + 700px);
height: 100px;
background-color: red;
}
七、继承
区别与混合，混合是复制粘贴，继承最后可以合并css代码，用并集选择器性能比混合高，灵活度比混合低
// 先定义公用的less 库
.juzhongMix{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.juzhongMix:hover{
background-color: red;
}
//然后使用继承，编写less
*{
margin: 0;
padding: 0;
}
@import url( ./mixin.less);
#wrap{
position: relative;
width: 300px;
height: 300px;
border: 1px solid red;
#box1{
//1、继承.juzhongMix样式，
& : extend( .juzhongMix);
width: 100px;
background-color: pink;
}
#box2{
//2、继承.juzhongMix所有相关的样式
& : extend(.juzhongMix all);
width: 50px;
height: 50px;
background-color: yellow;
}
} // 最终编译的css 文件如下
* {
margin: 0;
padding: 0;
}
//重复部分用了并集选择器
.juzhongMix,
#wrap #box1,
#wrap #box2 {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.juzhongMix:hover,
#wrap #box2:hover {
background-color: red;
}
#wrap {
position: relative;
width: 300px;
height: 300px;
border: 1px solid red;
}
#wrap #box1 {
width: 100px;
height: 100px;
background-color: pink;
}
#wrap #box2 {
width: 50px;
height: 50px;
background-color: yellow;
