LESS的多种运行方式

LESS是一种动态样式语言。

LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可一在服务端运行 (借助 Node.js).

中文官网:http://www.lesscss.net/

虽然我们已经有了自己的公共样式类库,每一个样式类都具有单一性的作用,但是远远不够的,我们的代码看上去还是那么臃肿的,大量的样式属性,还是在多个地方重复出现,样式文件由于重复而过于庞大。

这个时候,我们就可以使用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 。

官网地址:http://leafo.net/lessphp/

项目托管:https://github.com/leafo/lessphp

四. 使用LESS for Java

官网地址: http://www.asual.com/lesscss/

站点统计