我们大家都知道HTML和CSS不属于编程语言而是属于标记语言，所以很难像JS一样定义变量、编写方法、实现模块化开发等。而目前的CSS编写模式中，都是定义一些公共的样式类名，哪一块的HTML需要这个样式，就去增加对应的样式类名，所以我们经常看到一个标签上存在很多样式类名，在这种模式中我们要时常关注CSS的优先级，避免样式的重叠覆盖…

为了解决CSS的这一困境，CSS预处理预编译的思想脱颖而出，比较具有代表性的有LESS、SASS、Stylus。它们在传统的CSS基础上增加了大量的新的语法，编写方式，常用的函数等，可以让我们的CSS像JS一样成为一门编程语言。基于LESS我么可以把一些经常用到的样式定义成变量或者函数，以后需要直接的调取使用即可，这样不仅有利于增加我们的开发速度，也有利于项目的后期维护与可复用性。

LESS

在这篇文章以及后续的文章中，我将带领去了解LESS，学会使用LESS进行项目的实战开发。LESS是一门CSS预处理语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS更易维护和扩展。使用LESS基本上按照这样的步骤：编写LESS代码，使用NODE、JS或者是其他的工具把编写的LESS代码编译成我们平时看到的CSS代码(因为浏览器是无法解析LESS的语法的，所以编写完成的LESS代码需要进行编译)。

• [先看一个简单的案例]

在传统的CSS编写中，我们事先为一个盒子.box编写了一套样式，当鼠标滑过的时候，让盒子在原有样式的部分颜色值上发生改变，里面的DIV标签的阴影颜色变重，这样的话我们需要把之前的样式拿过来写一遍，只是调整一下透明度或者颜色值而已，页面中的冗余代码比较的多，也不方便后期的维护。

.box {
    color: #f938ab;
    border-color: #fdcdea;
}

.box1 div {
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}      //->在:hover触发的时候需要把上述的样式copy一份,在原来的基础上改变部分颜色值和透明度     .box:hover {
    color: #fe33ac;
}

.box:hover div {
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

如果我们使用的是LESS，那么我们可以节省很多的工作，也可以实现可扩展性和通用性，看下面的LESS代码：

//->定义变量存储颜色值     @color: #f938ab;
//->你可以把它理解为JS中的一个函数
.box-shadow(@style, @alpha:50%) {
    -webkit-box-shadow: @style rgba(0, 0, 0, @alpha);
    -moz-box-shadow: @style rgba(0, 0, 0, @alpha);
    -ms-box-shadow: @style rgba(0, 0, 0, @alpha);
    -o-box-shadow: @style rgba(0, 0, 0, @alpha);
    box-shadow: @style rgba(0, 0, 0, @alpha);
}

.box {
    color: @color;
    border-color: #fdcdea;
    //->嵌套: 代表是 .box div         
    div {             
      .box-shadow(0 0 5px, 30%);
    }    
    //->代表的是 .box:hover         
        &:hover {
            //->saturate: LESS提供的颜色处理方法(还有很多其它的方法),用来调整颜色的饱和度变化             
          color: saturate(@color, 5%);
            //->嵌套: 代表是 .box:hover div             
                           div {
                            .box-shadow(0 0 5px);
                            }        
        }    
}

通过NODE编译后的结果为：

.box {
    color: #f938ab;
    border-color: #fdcdea;
}

.box div {
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    -ms-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    -o-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.box:hover {
    color: #fe33ac;
}

.box:hover div {
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    -ms-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

大家感受一下，是不是感觉LESS很强大，一方面不仅仅让我们少些了很多的代码，而且我们定义的变量或者“函数”具有很强的公用性，以后其他的结构需要这样的样式，我们直接的调取就好了。既然认识到了LESS的强大，那么我们接下来就一步步的学会LESS的使用。

LESS的编译

上述我们提到，编写完成的LESS代码是不能直接在浏览器中运行的，需要编译成正常的CSS代码。那么我们首先就来学习一下常用的LESS编译方式。

1、在浏览器中调用LESS.JS

LESS只支持在现代浏览器中运行（最新版本的Chrome, Firefox, Safari 和 IE）。我们不建议在生产环境中使用LESS客户端，因为在将LESS编译成CSS的时候，用户会看到加载延迟的现象，即便在浏览器中有不足一秒的加载延迟，但也会降低性能。

首先引入我们设置样式的LESS文件，注意：这里的rel=’stylesheet/less’

     <link type="text/css" rel="stylesheet/less" href="1.less"/> 

其次为了方便开发过程中的调试(上线后我们也可以配置一些必要的参数)，我们可以在引入LESS.JS之前设置一些配置的参数。我们一般都把所有的配置参数放在全局变量less中。

//->在引入LESS之前设置一个全局的变量less,配置一些参数值(根据情况自行选择需要配置的项)     
var less = {
    //->evn:设置运行的环境(生产模式还是开发模式)         
    //production:编译后的CSS缓存到本地localStorage中         
    //development:没有把编译后的CSS缓存到本地,在URL不是标准的格式下(例如:file://...),自动设置为development         
    env: "development",          
     //->logLevel:javascript控制台日志量         
     logLevel: 2,          
     //->async:同步或者异步导入文件,默认是false代表同步         
     async: false,          
     //->fileAsync:使用文件协议访问页面时异步加载导入的文件,默认是false,如有需要设置为true         
     fileAsync: false,          
     //->poll:在监视模式下，每两次请求之间的时间间隔(ms)         
     poll: 1000,          
     //->dumpLineNumbers:当设置dumpLineNumbers直接输出源行信息到编译好的CSS的文件中时，有利于你调试指定行。comments参数用于输出用户可以理解的内容，而mediaQuery使用Firefox一个扩展来解析CSS和抽取信息。  
     dumpLineNumbers: "comments",          
     //->relativeUrls：是否调整相对路径。如果为false，则url已经是相对于入口的LESS文件。         
     relativeUrls: false     
};     //->还有其它的参数,自己下去后可以再进行扩展

然后引入我们的less.js

     <script type="text/javascript" src="less.js"> </script> 

最后开启监视模式后,只要我们的LESS改变，在一定时间内，浏览器就会重新的编译，我们可以看到想要的效果

     //->启用监视模式(env必须要设置成development)     
     less.watch(); 

2、使用NODE命令编译LESS

这种方式是目前项目中最常用的方式，也是我推荐大家使用的方式，它是把我们的LESS文件编译成CSS文件，我们项目中直接的引入CSS文件即可，基本步骤：安装->编译/压缩编译->或者使用NODE代码实现批量编译等

把LESS模块安装到全局NODE环境中

     npm install less -g 

使用命令进行编译

     //->把styles.less文件编译成styles.css文件(如果没有这个CSS文件自己会创建)    
     lessc styles.less styles.css      //->编译完成的CSS文件是经过压缩的     
     lessc styles.less styles.min.css -x或者--compress 

如果你想要更牛X的压缩,还可以自己单独的设定,下面我们使用–clean-css。这个需要提前的安装less-plugin-clean-css模块才可以。

     //->安装less-plugin-clean-css     
     npm install -g less-plugin-clean-css
     //->安装成功后就可以使用它压缩了     
     lessc --clean-css styles.less styles.min.css 

3、在NODE环境中编写批量编译的代码

我们在上述用NODE命令编译的时候，一次只能编译一个文件，这样，如果页面中有多个LESS，每一次编译都是比较耗费时间的，所以我们结合NODE的FS文件读写操作，可以写一套批量编译的代码。

//->定义编译文件目录和目标导出目录     
var dirPath = "./less/", tarPath = "./css/";      
//->导入NODE中需要使用的模块     
var fs = require("fs"),         
    less = require("less");      
//->读取dirPath中的所有文件,检查文件的类型,只有LESS文件我们才进行存储     
var ary = [],         
files = fs.readdirSync(dirPath);     
files.forEach(function (file, index) {
    /\.(LESS)/i.test(file) ? ary.push(file) : null;
});      
//->把目录下的所有文件进行编译,把编译完成的结果保存在指定的目录中     
ary.forEach(function (file) {
    var newFile = file.replace(".less", ".css"),
    conFile = fs.readFileSync(dirPath + file, "utf-8"); 
less.render(conFile, {compress: true}, function (error, output) { 
    fs.writeFileSync(tarPath + newFile, output.css, "utf-8");
    }); 
}); 

4、使用工具编译LESS

目前常用的编译工具有：Koala(据说目前最流行的)、在线编译(http://tool.oschina.net/less)、SimpLESS等。关于工具的使用，自己下去下载研究即可，非常的简单，本篇文章不做过多的说明。

点击我，继续学习LESS的基础语法。