Less的语法及使用方法

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