1、变量
我们可以先看看别的里面创建变量和Less里面创建变量有什么不同：
在JavaScript里面创建变量有两种方式：
一种是使用var关键字来进行定义变量的，还有一种定义变量的方式就是let（这个是ES6里面的语法）定义的，这两种变量在JavaScript里面就可以明显的体现的出来。
在java里面定义变量就是每一种数据类型都有专门拿来定义的，就比如说用int来定义的变量只能存储数字类型的数据，这个就不能存储字符串类型的数据。
int a = 10;
a="大家好！";//然后在这个地方再去把a变量拿去使用就会出现报错
而Less里面创建变量的语法就是：
语法就是：@变量名:值；
例：
//这个是颜色
@red:#f00;
2、混合
这个混合的意思在这就是我们可以用定义好的变量在一个.bg(){}的里面进行直接使用，然后还可以在其括号里面进行添加参数，也可以直接在其里面进行调用带有括号的样式，这个就是所谓的混合。
在这里要注意的就是带有括号的那些样式只有在less里面才能看的到！
下面是一个简单的使用方法：
//创建变量并且加上一个颜色
@gray: #999;
// 只在less文件中存在，在less里面可以这样写进行调用
.bg() {
background-color: @gray;
}
//开可以这样写记性调用，但是下面的这种写法在在编译出来的css文件里面会显现出来
.bg{
background-color:@gray;
}
// ()中可以传递参数，也可以给定默认值，优先使用传递过来的参数
.center(@type: absolute) {
position: @type;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.content {
color: red;
.bg();
.center(absolute);
}
.header {
.bg();
.center(fixed);
}
3、嵌套
Less提供了使用嵌套代替层叠结合使用的能力。在less里面写的代码如下：
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
然后在less文件在vs code里面自动生成的css样式里面就会显现是下面的这个样子的：
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
我们同时也有 其他的嵌套方式：
.container {
width: 1000px;
//在这里的&指的是他的父级的元素
//这个是在当前选择器的前面添加一个空元素
&::before {
content: '';
display: table;
}
//这个是在当前选择器的后面添加一个空元素
&::after {
content: "";
display: flex;
}
.logo {
width: 150px;
}
//还可以这样使用
//其他的伪类选择器都可以这样使用，除了上面的::after和::before这两个伪类，这两个使用配合&使用的。
a:hover{
color:#ff0;
}
}
在嵌套里面有冒泡的使用方法，在这里有使用的@符号的方法，使用这个表示规则，例如@media或@supports均可以于选择器一相同的方式进行嵌套。@规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变，这就叫做冒泡。
在less里面写的语句，
例子：
.component {
width: 300px;
@media (min-width: 768px) {
width: 600px;
@media (min-resolution: 192dpi) {
background-image: url(/img/retina2x.png);
}
}
@media (min-width: 1280px) {
width: 800px;
}
}
然后在其创建的less文件编译出来的css文件里面显示的代码如下：
.component {
width: 300px;
}
@media (min-width: 768px) {
.component {
width: 600px;
}
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
.component {
background-image: url(/img/retina2x.png);
}
}
@media (min-width: 1280px) {
.component {
width: 800px;
}
}
4、运算
这里说的是less里面元素的方法，在less里面两者之间进行运算的运算符就是有+、-、*和/这四个方式，在这里可以进行对任何数字和颜色或变量进行运算。
在这里要注意的是，无论在用哪一个运算符进行运算他的值的单位始终保持着前面的一个变量的单位然后在进行使用后面一个数（这里是去掉了单位的），然后的到的结果就是前面的一个数值和后面的数值进行运算得出来的数再在后面添加上前面一个数据的单位。
具体的例子：
// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%
//颜色的计算
@color: #224488 / 2; //结果是 #112244
background-color: #112244 + #111; // 结果是 #223355
5、函数
在less里面就有一些内置的特定的函数有很多，可以用于转换颜色、处理字符串、算术运算符等等。我在这里介绍一下几个简单的函数的使用：
例：
@base: #f04615;
@width: 0.5;
.class {
//这个是将一个数字转换成百分比的数据
width: percentage(@width); // return `50%`
//这个是将颜色的饱和度增加5%
color: saturate(@base, 5%);
//lighten的函数表示的意思是将颜色的亮度降低25%，并且这里的spin函数是将色相值增加8
background-color: spin(lighten(@base, 25%), 8);
//那么在前面有降低，这里就有提升颜色的函数
background-color: darken(@primary, 20%);
}
6、作用域
在这里我就要说一下JavaScript里面的作用域和less里面的作用域。
先说一下JavaScript里面的作用域是这样使用的规律的：
例：
var a = 12;
function d(){
var b = 3;
function e(){
//在这里就是调用的最后面a然后再拿来使用的
var c = a;
//这个地方f所得到的值为3，就是他会先去找自己有没有这个b，如果没有那就会去他的父级去找
//如果找到了就会直接拿来使用，就会停止去找上级去找变量的
var f = b;
}
}
而在less里面的作用域和JavaScript差不多，就是定义变量的方法不一样，作用域的使用如下面代码：
例：
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
在这里要注意的就是变量的定义调用对其什么地方创建变量都不会对其使用没有影响，但是如果你没有你要使用的变量的时候没有，那么就会进行报错的。下面的代码就看的出变量定义的早和晚都没有影响的：
例：
@var: red;
#page {
#header {
color: @var; // white
}
@var: white;
}
7、注释
在这里我们都知道有很多种注释的方式。
那我们先来说说在JavaScript里面注释语句的时候的方法使用时的方法；
例：//这是注释
很明显就是在JavaScript里面注释的方法就是“//”这个方法。
我们再说说在SQL Sever里面注释的语句的方法和上面的JavaScript里面注释语句的方法是一样的。
在css文件里面的注释的方法就是下面这样的：
例：/我是注释/
很明显就是在CSS里面注释的方法就是“/* */”这个方法。
在html里面要注释一段代码的方法就是下面这样的：
例：
很明显就是hrml里面注释的方式就是“
”这个方法。
而在Less文件里面有两种注释的方法，但是他们有所不同：
先说一下里面有那两种注释：
第一种语法：//我是注释
第二种语法：/我是注释/
在这里第一种注释方法只能在less里面才能看的见，而在其编译出来的css文件里面不会显示你在less里面的注释的，而在less文件里面使用第二种注释方法就会出现一个现象就是，在其编译出来的css文件里面会给你显现出来的。
8、导入
“导入”的工作方式和你预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件默认的是 .less 扩展名，则可以将扩展名省略掉：
例：
@import "library"; // library.less
@import "typo.css";
9、映射
这个映射是在Less3.5的版本里面才开始有的，在这个地方你可以将混合和规则集作为一组值得映射使用。
例：
#colors() {
primary: blue;
secondary: green;
}
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}
在less编译出来的css文件里面显现的样式是这样的：
.button {
color: blue;
border: 1px solid green;
}
