为了解决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.css3、在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等。关于工具的使用,自己下去下载研究即可,非常的简单,本篇文章不做过多的说明。