变量是指其值可以随意变化的量，也就是说值不固定，在 Less 中一般指提前预设好的值，在需要的地方可以多次调用。
变量声明语法：
// 变量的声明规则 @变量名:值;
变量命名规则：
必须有@为前缀
不能包含特殊字符，不能以数字开头
大小写敏感
// 定义颜色变量
@color1: grey;
@color2: red;
@font14: 14px;
@font20: 20px;
.c1{
// 使用颜色变量
color: @color1;
background: @color2;
font-size: @font14;
}
.c2{
color: @color2;
background: @color1;
font-size: @font20;
}嵌套
我们在编写 Less 代码的时候，可以写出含有层级关系的 Less 代码，生成的 css 代码也是自动带有层级关系。比如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./test.css"> <title>Document</title> </head> <body> <header> <div class="content"> <a href="">中国</a> <a href="">河南</a> <a href="">郑州</a> <a href="" class="address">高新区</a> </div> </header> </body> </html>
// test.less
header{
height: 50px;
background: red;
// 下级可以直接嵌套编写
.content{
height: 30px;
background: green;
// 下级可以直接嵌套编写
a{
color: orange;
font-size: 14px;
// 伪类需要在前面加个&符号
&:hover{
color: chartreuse;
}
// 伪元素也是要在前面加个&符号
&::after{
content: '书生';
}
// 交集也是要在前面加个&符号
&.address{
text-decoration: none;
}
}
}
}编译生成的 test.css 的内容是这样的：
/* 编译生成的 test.css */
header {
height: 50px;
background: red;
}
header .content {
height: 30px;
background: green;
}
header .content a {
color: orange;
font-size: 14px;
}
header .content a:hover {
color: chartreuse;
}
header .content a::after {
content: '书生';
}
header .content a.address {
text-decoration: none;
}MiXin (混合/混入)
MiXin (混合/混入) 是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。
有输出的混入：
比如我们想要这样的代码：
.xxx {
font-size: 14px;
color: red;
}
.yyy {
font-size: 14px;
color: red;
background-color: blueviolet;
border: 1px solid red;
}我们发现，这样写代码的时候，发现 .xxx 的内容和 .yyy 的内容有一部分是重复的，为了提高代码的复用度，其实我们可以使用并集选择器处理。不过使用 Less 的话，还有一种方法，比如我们可以在 Less 文件中这样写：
.xxx {
font-size: 14px;
color: red;
}
.yyy {
// 将 .xxx 中的样式混入到 .yyy 中
.xxx;
background-color: blueviolet;
border: 1px solid red;
}无输出的混入：
前面的混入在使用的时候，十分的方便代码的复用，但是还有些时候，我们希望我们的混入代码并不要在生成的文件中出现，只是想在被混入的地方出现，那么我们只需在编写混入代码的时候，在其选择器后面加上() 即可。比如，我们想得到这样的代码：
.yyy {
font-size: 14px;
color: red;
border: 1px solid red;
}
.zzz {
font-size: 14px;
color: red;
background-color: blueviolet;
}对于共用部分的代码，我们并不想在一个单独的选择器中出现，那么我们可以在 Less 代码中这样写：
// 声明的时候，选择器的后面加个英文小括号
.xxx() {
font-size: 14px;
color: red;
}
.yyy {
// 使用混入的时候，后面的括号，加不加都可以
.xxx();
border: 1px solid red;
}
.zzz {
.xxx;
background-color: blueviolet;
}作用域
首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。
混入的作用域查找：
.xxx() {
font-size: 14px;
}
.yyy {
.xxx () {
font-size: 18px;
}
// 优先在本地作用域中查找MiXin
.xxx();
border: 1px solid blue;
}生成的 css 代码为：
.yyy {
font-size: 18px;
border: 1px solid blue;
}变量的作用域查找：
@MYCOLOR: red;
.yyy {
@MYCOLOR: green;
// 优先在本地作用域中查找变量
border: 1px solid @MYCOLOR;
}生成的 css 代码为：
.yyy {
border: 1px solid green;
}无需先声明再使用：
混合（mixin）和变量的定义不必在引用之前事先定义。
@MYCOLOR: red;
.yyy {
// 先使用后声明也是可以的
border: 1px solid @MYCOLOR;
@MYCOLOR: green;
}映射
从 Less 3.5 版本开始，你还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。
// 自定义的规则集合
.COL() {
x1: blue;
x2: green;
}
.button {
// 使用规则集合
color: .COL[x1];
border: 1px solid .COL[x2];
}上面的使用，就像 JS 定义一个对象和并按照键使用它一样。
运算
任何数字、颜色或者变量都可以参与运算。就是Less提供了加（ +）、减（ - ）、乘（ * ）、除（ / ）算术运算。
// test.less
/* 这种注释编译生成的文件中也存在 */
// 这种注释在编译生成的文件中不存在
@border: 10px + 5;
div {
height: 300px * 1.5;
width: 300px / 2;
border: @border solid red;
// 还能运行较复杂的运算
border-radius: (@border - 5) * 2;
// 由于前四位代表的ffff 换算成十进制已经分别到255了，再加就溢出了，
// 因此即使加20，还是按照255算，因此还是ffff
// 最后两位的计算方式：
// 十六进制转成十进制 60 = 6 * 16 + 0 = 96
// 使用十进制 进行运算 96 + 20 = 116
// 将运算后的结果转成16进制 116 / 16 结果是7余4，那么运算的结果就是74
// 所以 #ffff60 + 20 最后的结果应该是： #ffff74
color: #ffff60 + 20;
// 40 + 20 = 60 换算成16进制 60/16 等于3余12 所以结果为 3c
// 50 + 20 = 70 换算成16进制 70/16 等于4余6 所以结果为 46
// 60 + 20 = 80 换算成16进制 80/16 等于5余0 所以结果为 50
// 因此结果应该为 #3c4650
color: rgb(40, 50, 60) + 20;
}运算符中间左右有个空格隔开，比如：
10px + 5对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
如果两个值之间只有一个值有单位，则运算结果就取该单位
关于颜色的几个常见函数可以参考：https://www.jianshu.com/p/124ef8721fc7
导入外部文件
我们知道，在 css 中，我们是可以导入其它样式的，比如：
/* index.css */
/*
在这里使用@import + 样式路径的形式导入其它样式
注意：
1. 必须在css文件的最前面使用@import
2. 结尾一定要有分号
*/
@import "./common.css";
/* 两种写法都正确 */
@import url("./common.css");
div:nth-child(1){
width: 100px;
height: 100px;
background-color: aqua;
}/* common.css */
div:nth-child(2){
width: 100px;
height: 100px;
background-color: darkmagenta;
}其实在 Less 中，可以直接按照 css 的写法处理，不过其自带的也有类似的用法，和原来的 css 的略有不同：
// index.less
// 这里不用写后缀名
// 其实就相当于把需要导入的文件内容复制进来
@import "./common";
div:nth-child(1){
width: 100px;
height: 100px;
background-color: aqua;
}// common.less
div:nth-child(2){
width: 100px;
height: 100px;
background-color: darkmagenta;
}注意，在部分 Less 编译场景下，如果只改了被引入的 Less 文件，没有在主 Less 文件中重新进行 css 文件的生成，则修改部分可能会不生效。
注释
使用 css 原生注释写法编写的注释，会在生成的 css 文件中出现，而使用 Less 注释方式编写的注释则不会出现在生成的 css 文件中。
/* 这是css原生的注释写法 */ // 这是less的注释写法
