less的大致知识基础

1.less中的注释

​ 以//开头的注释，不会编译到css的文件夹中

以 /**/包裹的注释会被编译到css文件夹中

2.less中的变量

​ 使用@来申明一个变量：@pink:pink;

1. 作为普通属性值只用来使用:直接使用@pink

   @color:pink; background:@color;

2. 作为选择器和属性名：@{selector的值}（选择器（class或者id选择器））的形式，属性值：@{m}(属性名)

   ​ @m:margin; @selector:#wrap;

   ​ @{m}: 0; @{selector}{}

3. 作为URL：@{url} 里面写地址url

4. 变量的延迟加载

3.less中的嵌套规则

​ 1.基本的嵌套规则：样式的父子关系嵌套

​ 2.&的使用：&代表前面的选择器，与其平级

 .inner{
​                position: absolute; 
​                left:0;
​                right:0;
​                top:0;
​                bottom:0;
​                margin:auto;
​                background:@color;
​                height:100px;
​                width: 100px;
​                &:hover{
​                background-color: skyblue;
​                }
​            }

​ &的那段代码等价于：.inner:hover{background-color:skyblue;}

4.less中的混合

​ 含义：混合就是将一系列属性从一个规则引入到另一个规则的方式

​ 1.普通混合(会编译到css文件里面去，会使css文件变得很大)

```css
*{
    margin: 0;
    padding: 0;
}
.juzhong{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}
#wrap{
    position: relative;
    margin: 0 auto;
    width: 400px;
    height: 600px;
    border: 1px solid;
}



#box1{
    width: 100px;
    height: 100px;
    background: pink;
    .juzhong;
}
#box2{
    width: 100px;
    height: 100px;
    background: deeppink;
    .juzhong;
}

​		 把公共的样式代码写入一个混合的样式里，在使用的地方可以直接调用这个公共的样式名

​	2.不带输出的混合
	

```css
*{
    margin: 0;
    padding: 0;
}
.juzhong(){
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}
#wrap{
    position: relative;
    margin: 0 auto;
    width: 400px;
    height: 600px;
    border: 1px solid;
}



#box1{
    width: 100px;
    height: 100px;
    background: pink;
    .juzhong;
}
#box2{
    width: 100px;
    height: 100px;
    background: deeppink;
    .juzhong;
}

​ 3.带参数的混合

	*{
    margin: 0;
    padding: 0;
}
.juzhong(@w,@h,@c){
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    width: @w;
    height: @h;
    background: @c;
}
#wrap{
    position: relative;
    margin: 0 auto;
    width: 400px;
    height: 600px;
    border: 1px solid;
}



#box1{
    .juzhong(100px,100px,pink);
    z-index: 1;
}
#box2{
    .juzhong(200px,200px,deeppink);
}

​ 4.带参数并且有默认值的混合

*{
    margin: 0;
    padding: 0;
}
.juzhong(@w:100px,@h:100px,@c:pink){
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    width: @w;
    height: @h;
    background: @c;
}
#wrap{
    position: relative;
    margin: 0 auto;
    width: 400px;
    height: 600px;
    border: 1px solid;
}



#box1{
    .juzhong;
    z-index: 1;
}
#box2{
    .juzhong(200px,200px,deeppink);
}

​ 5.带多个参数的混合

*{
    margin: 0;
    padding: 0;
}
.juzhong(@w,@h,@c){
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    width: @w;
    height: @h;
    background: @c;
}
#wrap{
    position: relative;
    margin: 0 auto;
    width: 400px;
    height: 600px;
    border: 1px solid;
}



#box1{
    .juzhong(100px,100px,pink);
    z-index: 1;
}
#box2{
    .juzhong(200px,200px,deeppink);
}

​ 6.命名参数

*{
    margin: 0;
    padding: 0;
}
.juzhong(@w:100px,@h:100px,@c:pink){
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    width: @w;
    height: @h;
    background: @c;
}
#wrap{
    position: relative;
    margin: 0 auto;
    width: 400px;
    height: 600px;
    border: 1px solid;
}



#box1{
    .juzhong();
    z-index: 1;
}
#box2{
    .juzhong(@h:200px;@c:deeppink;);
}

​ 7.匹配模式 (根据变量来进行样式的匹配)

*{
    margin: 0;
    padding: 0;
}



/*向上的三角*/
.triangle(top,@w:10px,@c:pink){
    border-width:@w;
    border-color: transparent  transparent  @c transparent ;
    border-style:dashed dashed solid dashed  ;
}
/*向下的三角*/
.triangle(bottom,@w:10px,@c:pink){
    border-width:@w;
    border-color: @c transparent  transparent   transparent ;
    border-style:solid dashed dashed  dashed  ;
}
/*向左的三角*/
.triangle(left,@w:10px,@c:pink){
    border-width:@w;
    border-color:  transparent @c  transparent   transparent ;
    border-style: dashed solid dashed  dashed  ;
}
/*向右的三角*/
.triangle(right,@w:10px,@c:pink){
    border-width:@w;
    border-color:  transparent   transparent   transparent @c;
    border-style: dashed  dashed  dashed  solid;
}

.triangle(@_,@w:10px,@c:pink){
    width: 0;
    height: 0;
    overflow: hidden;
}

#sanjiao{
    .triangle(top,50px,deeppink);
}
#sanjiao2{
    .triangle(bottom);
}
#sanjiao3{
    .triangle(left);
}
#sanjiao4{
    .triangle(right);
}

​ 8.arguments变量

​			.border(@w:10px,@style:solid,@c:deeppink){

​    border: @arguments;

}

5.less运算

在less中可以进行加减乘除的运算

注意：计算的双方只需要一方带单位即可

6.继承

性能比混合高

灵活度比混合低

7.less的预编译

知识来源：https://www.bilibili.com/video/BV1YW411T7vd/?p=8&spm_id_from=333.880.my_history.page.click