LESS的多种运行方式
LESS是一种动态样式语言。
LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可一在服务端运行 (借助 Node.js).
虽然我们已经有了自己的公共样式类库,每一个样式类都具有单一性的作用,但是远远不够的,我们的代码看上去还是那么臃肿的,大量的样式属性,还是在多个地方重复出现,样式文件由于重复而过于庞大。
这个时候,我们就可以使用LESS管理你的CSS,高效、可维护的代码就指日可待了。
今天要说的是LESS的多种运行方式。
一. 客户端上编译。
1 2 | <link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script> |
注意你写好的.less文件必须在less.js之前,不然无法解析。
二. linux node下编译。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | /* linux下开发,当你保存的时候,lesstocss将你的less文件自动编译成css文件 * 用法: node lesstocss [filename1,filename2,...] * version: v0.1 * by 飞长(veryued.org) **/ //设置lessc路径 var lessc ='~/git/less.js/bin/lessc'; var util = require('util'), fs = require('fs'), exec = require('child_process').exec; //获取屏幕输入参数数组 var filenames = process.argv.slice(2); filenames.forEach(function (val, index, array) { (function(filename){ var tempTime; fs.watchFile(''+filename+'.less',function(curr,prev){ var child = exec('stat '+filename+'.less | grep Modify', function (error, stdout, stderr) { if(tempTime != stdout){ console.log(''+filename+'.less changed'); var lesschild = exec(''+lessc+' '+filename+'.less > '+filename+'.css' ,function(erro,stdout,stderr){ console.log(stdout); if (erro !== null) { console.log('exec erro: ' + erro+stderr); } }); tempTime = stdout; } if (error !== null) { console.log('exec error: ' + error); } }); }); })(val); }); |
此解决方案来自“飞长’s Blog”的《linux下less开发实时编译工具 by node》文章
三. 使用lessphp 编译LESS 。
lessphp 是使用php写的类来编译LESS 。
文章评论 已经有 0 条评论!