LESS学习:了解LESS和编译LESS

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

    为了解决CSS的这一困境，CSS预处理预编译的思想脱颖而出，比较具有代表性的有LESS、SASS、Stylus。它们在传统的CSS基础上增加了大量的新的语法，编写方式，常用的函数等，可以让我们的CSS像JS一样成为一门编程语言。基于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.js文件的html文件，否则会报：“Failed to load 本地路径/a.less: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. less-1.7.0.js:7672”的错误。

    首先引入我们设置样式的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等。关于工具的使用，自己下去下载研究即可，非常的简单，本篇文章不做过多的说明。


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！