十分钟入门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文件