less详解和说明

男娘i 2023-07-20 10:45 184阅读 0赞

# 一、注释 #

> 以 /\*/包裹的注释会被编译到css文件里面  
> 以//开头的注释不会编译到css里面

# 二、less里面的变量 #

**用@来声明变量**  
注意：

> 1、作为普通属性值来使用：@hello（变量名）：yellow（变量值）  
> 2、作为选择器和属性名：@\{selector\}  
> 3、作为URL：@url  
> 4、变量的延迟加载

less文件：

@wnum:60%;								/*定义普通变量*/
    @high:height;							/*定义属性*/
    @selector:.box;							/*定义选择器*/
    @con:container;
    @url:"../images/image06.jpg";			/*定义URL*/
    #@{ con} { 
      width: @wnum;							/*使用普通变量*/
      @{ high}: 20em;						/*使用属性*/
      background-color: yellow;
      margin: 0 auto;
      position: relative; @{ selector} { 							/*使用选择器*/
        width: 20%;
        height: 20%;
        background-image: url(@url);		/*使用URL*/
        background-size: 10em;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }

**注意这里的为选择器和属性名创建变量很少用**

### 关于变量的延时加载（css里面有块级作用域） ###

less文件：

@num:1;
    .class{ 
      @num:2;
      four:@num;				/*变量延时，5*/
      .box{ 
        @num:3;
        three:@num;				/*变量延时，4*/
        @num:4;
      }
      .box1{ 
        six:@num;				/*变量延时，5*/
      }
      @num:5;
    }
    .v1{ 
      five:@num;				/*为 1 */
    }

# 三、less的嵌套规则 #

### a）、基本嵌套规则 ###

**只要一嵌套就会产生空格**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]

### b）、&的使用 ###

**&可以取消嵌套的空格（平级）**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 1]

# 四、less中的混合 #

**less的混合**：混合就是将一系列属性从一个规则集引入到另一个规则集的方式，混合不是函数，但其却有着相同的灵魂

### a）、普通混合 ###

**会把less里面的混合输出到css文件里面(当然我们不希望这样)**

.size{ 
      width: 20%;
      height: 20%;
    }
    #container { 
      width: 60%;
      height: 20em;
      background-color: yellow;
      margin: 0 auto;
      position: relative; .box { 
        .size;
        background-color: #ccc;
      }
      .box1{ 
        .size;
        background-color: red;
      }
    }

### b）、不带输出的混合 ###

**不会把less的混合输出到css里面**

.size(){ 
      width: 20%;
      height: 20%;
    }
    #container { 
      width: 60%;
      height: 20em;
      background-color: yellow;
      margin: 0 auto;
      position: relative; .box { 
        .size;
        background-color: #ccc;
      }
      .box1{ 
        .size;
        background-color: red;
      }
    }

### c）、带参数的混合 ###

**可以提高灵活性**

.size(@color){ 
      width: 20%;
      height: 20%;
      background-color: @color;
    }
    #container { 
      width: 60%;
      height: 20em;
      background-color: yellow;
      margin: 0 auto;
      position: relative; .box { 
        .size(#ccc);
      }
      .box1{ 
        .size(red);
      }
    }

### d）、带参数且有默认值的混合 ###

.size(@color:skyblue){ 
      width: 20%;
      height: 20%;
      background-color: @color;
    }
    #container { 
      width: 60%;
      height: 20em;
      background-color: yellow;
      margin: 0 auto;
      position: relative; .box { 
        .size();
      }
      .box1{ 
        .size(red);
      }
    }

### e）、命名参数 ###

.size(@color:skyblue,@b:1px black solid){ 
      width: 20%;
      height: 20%;
      background-color: @color;
      border: @b;
    }
    #container { 
      width: 60%;
      height: 20em;
      background-color: yellow;
      margin: 0 auto;
      position: relative; .box { 
        .size(2px green solid);
      }
      .box1{ 
        .size(@b:2px red solid);
      }
    }

### f）、匹配模式 ###

**@\_：类似与一个对象的构造方法**

.size(T,@color:skyblue,@b:1px black solid){ 						/*这里的T可以是任何字符串*/
      background-color: @color;
      border: @b;
    }
    .size(@_,@color:skyblue,@b:1px black solid){ 					/*这里的@_值为上面的那个T，这两个缺一不可*/
      width: 20%;
      height: 20%;
    }

标识符  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 2]

### g）、argument变量 ###

**类似与js里面的argument（伪数组）**

# 五、less运算 #

在less的加减乘除，运算只需要一个单位即可，如果加减有多个单位以第一个为标准，乘除注意单位一致

@width:200px;
    @color:red;
    .class{ 
    	width:@width - 150;										
    	background-color:@color + #ccc;
    	color:@color*2;
    	padding: @width/20;
    	height:@width -20*5;
    	margin:(@width+20)/5;
    }

**css里面的calc(）也可也用来计算，在这里不赘述了。**

想了解的[点击这里][Link 1]

### h）、继承 ###

**less的继承在css的代码复用更好，但是在less里面的灵活性很差。（鱼与熊掌），less只能继承类不能继承混合，但也并不是不能继承混合，只需要把混合包装成类即可**

.box:extend(.centerLevel all){ 							/*all代表把与centerLevel相关的伪类全部拿来*/
    	.bg(@color:green,@size:10em);						/*这里的extend是继承了centerLevel所有的混合*/
    }
    .box1 { 
        &:extend(.centerLevel);								/*这里的extend只继承了centerLevel（不包括hover）*/
        .bg(@color:red);
    }

.centerLevel{ 											/*centerLevel混合*/
        position:absolute ;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    .centerLevel:hover{ 										/*centerLevel：hover的混合*/
        background-color: #46b8da;
    }

.bg(@size:5em,@color:skyblue,@b:1px black solid){ 			/*bg混合*/
    	background-color: @color;
    	border: @b;
    	width: @size;
    	height: @size;
    }

# 六、less避免编译 #

借用官方的例子

@min768: ~"(min-width: 768px)";			/*输出@min768: (min-width: 768px);*/
    .element { 
      @media @min768 { 
        font-size: 1.2rem;
      }
    }

# 七、导入 #

@import "library"; 
    @import "typo.css";

# 八、编写less的时候也要注意css优先级的问题 #

好学的朋友也可以去[这里看看][Link 2]

本文只用于个人学习和记录

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]: /images/20230528/cf1d7bb26609410ea235ed4731511a19.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 1]: /images/20230528/cef1268c37ae489ca6c71e86ad0e8d28.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 2]: /images/20230528/846240d72dc44202b2525574bbf73a28.png
[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc
[Link 2]: https://juejin.im/post/5a2bc28f6fb9a044fe464b19