让你快速进行web前端开发的途径-LESS学习:了解LESS和编译LESS

作者:zhufengpeixun日期:2016-07-22 20:51:15 点击:2797 LESS

我们大家都知道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的基础语法。

上一篇: 一篇文章,让你快速了解Hybrid App开发模式

下一篇: 通过LESS的基础语法的学习,提高web前端开发的效果