十分钟入门CSS预处理器——Less

今天我们扯一扯CSS的预处理器——Less。

在此之前我们思考一下CSS和Javascript在语言特性上有什么区别呢？
其实它们之中最大的区别就是CSS是静态的，没有变量和函数这些概念

现在这个问题解决了，less就可以实现变量和函数的功能
通常less文件通过less工具编译成css文件。

什么叫less语言呢？首先编写.less的文件，然后我们再使用less工具，
其实就是一段脚本，让它生产CSS文件。

这个less工具最初是在浏览器上的一个JS脚本，是在浏览器端进行运行，直到后来有了node的出现，就有了node的插件，脱离浏览器，可以在服务端进行编译，把它编译成CSS文件。

那么我们为什么要使用less呢？
这是因为它可以给我们带来动态语言所具有的优势。
定义变量：如果我们有多个样式类，引用同一个变量的话，当这个变量修改时，这些样式类就
会发生修改。比如说像颜色等，我们要换皮肤的时候，只需要将这个颜色变量进行修改，整个界面的
主题颜色就发生了变化。
优化了后代选择器的写法：
支持文件引用：
这就让less文件可以进行拆分编写：
增加了函数的功能：

这里我们介绍几个常用的语法：
【常用语法：定义变量、后代选择器、文件引用、函数】

下面我们具体的介绍一下
定义变量

//编译前的Less语言
@bgColor:#000; //定义变量，背景颜色

.frame{
    background-color:@bgColor; //使用变量
}
//=================================

//编译后的CSS语言
.frame{
    background-color:#000000;
}

优化了后代选择器 也就是说可以嵌套,添加伪类用&符号

//编译前的Less语言
.frame{
background-color:@bgColor;
    .select{ //添加嵌套
        width:100px;
    }
    &:after{ //添加伪类
        content:'';
    }
}

//=================================
//编译后的CSS文件
.frame{
    background-color:#000000;
}
.frame .select{
    width:100px;
}
.frame:after{
     content:'';
}

函数功能
函数：函数本身是不编译的，没有引用函数本身的话，也是不编译的
也就是说它相当于一段通用代码

//编译前的Less语言
.frame{
    .fun(123px); //调用函数并传参
    background-color:#000000;
}

.fun(@px){ //封装函数
    height:@px;
}
//=================================

//编译后的CSS文件
.frame{
    height:123px;
    background-color:#000000;
}

文件引用：

文件引用： @import '文件名',文件名可以是相对路径
我在定义一些全局变量的时候，我们会定义在一个.less文件中
然后我们引用这个全局变量文件，把这些变量添加到我们的样式类中。

我们会写一个初始化的less文件，然后把要编译的所有less文件都引用进来，
然后我们用工具进行编译的时候，只需要编译这个启动的less文件（初始化的less文件）
它就会把其他的less文件自己加载进来，自动编译。
@import 'sadsf.less'

---

通常我们会用一些项目构建工具将.less文件变编译成CSS文件，比如说下面我们介绍的Gulp工具
gulp文件如何编译Less文件以及如何配置gulpfile.js文件