注释
在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';