less

注释

在less文件中可以写两种注释

1.可以直接用CSS注释（最后会编译展示在CSS文件中）

/* 注释内容 */

，最后会编译展示在css文件中

2.Less注释（只在less中使用，不会编译展示在css文件中）

// 注释的内容

变量

变量：可以变化的量
语法：@变量名:变量值;
作用：编译的时候会把less中所有的变量名替换成变量值，这样可以统一修改某一个值（如主题色）

@mainColor:#e92322; //@变量名:变量值;

.box {
  width: 100px;
  height: 100px;
  background-color: @mainColor;
}

嵌套

// less中的嵌套：less中选择器可以嵌套

// 1、后代选择器，选择器嵌套即可

// 2、子代选择器，前面使用>

// 3、并集选择器，前面直接写,

// 4、交集选择器，前面使用&（&表示上一级选择器）

// 5、伪元素，前面使用&（&表示上一级选择器）

.father {  
  width: 300px;  
  height: 300px;  
  background-color: red;  

  // 后代选择器：通过嵌套表示后代关系  

  .son {    
    width: 100px;    
    height: 100px;    
    background-color: blue;  

  }  

  // 子代选择器：通过嵌套 + > 表示 

  >.son {    

    background-color: red;  

  }  

  // 并集选择器：通过嵌套可以省略父级选择器  

  .one,  
  .two {    
    background-color: yellow;  
  }  

  // 交集选择器：&表示上一级选择器  

  &.red {    
    background-color: red;  
  }      

  // 结构伪类选择器：&表示上一级选择器  

  &:nth-child(1) {    
    background-color: red;  
  }  

  // 链接伪类选择器：&表示上一级选择器 

  &:hover {    
    background-color: green;  
  }  
  // 伪元素：&表示上一级选择器  

  &::after {    content: '';  
  }
}

运算

.box {  
  width: 200px;  
  height: 200px;  
  background-color: pink;  
  // 伪类的写法  
  &:hover {    
    // less中可以直接计算加减乘除计算的，编译之后会把计算的结果直接显示在css文件中。之后学习的rem布局中需要使用到less运算的功能    
    width: 200px * 2;    
    width: (200px / 3);    
    width: 200px + 100;    
    width: 200px - 100;  
  }
}

注意点： 在 less 4.0 版本之后， 除法运算/ 如果在括号 () 外，不会执行除法，推荐使用 () 包裹即可

*函数

语法：.函数名() { 重复的样式 }

// 针对于页面中重复的代码
// 1、之前：抽取出公共类——》给需要的标签加类名 
.common {   
  width: 300px;   
  height: 300px; 
}
// 2、现在：less中的函数——》在选择器中调用
// 语法：.函数名() { 重复的代码 }

// 定义函数
.common() {  
  width: 300px;  
  height: 300px;
}

.red {  
  // 使用函数 
   .common();  
   background-color: red;
}

*引入

(例：将base.less引入index.less，可以直接编译成一个css文件，减少html标签)

语法

 @import '需要引入的less文件的路径'; 
 //注意点：一般引入的文件写在最前面，保证自己的样式写在后，优先

 例：
 @import 'base.less';