登录
注册
node.js 学习社区
简单案例:使用Node.JS在线渲染LESS CSS

盘古哥哥

2014-12-07 17:13

什么是LESS CSS

一种动态样式语言。LESS将CSS赋予了动态语言的特性,如变量,继承,运算,函数。LESS既可以在客户端上运行,也可以借助Node.js在服务端运行。
LESS CSS的使用

客户端的解析:可以在head将 rel 属性值为 “stylesheet/less”,并引入
<script src="less.js" type="text/javascript"></script> 


命令行中使用:lessc styles.less > styles.css 可以实现样式的解析


node.js中解析
var less = require('less');
less.render('.class { width: 1 + 1 }', function (e, css) {
    console.log(css);
});

或者
var parser = new(less.Parser);
parser.parse('.class { width: 1 + 1 }', function (err, tree) {
    if (err) { return console.error(err) }
    console.log(tree.toCSS());
});


可以发现,要学习LESS CSS、做个简单的测试、研究生成的CSS,上面的方法都比较不够直观方便。 以下代码简单使用node.js在线解析用户提交的LESS CSS文本,方便用户测试研究。

index.js
var express = require('express'),
app = express.createServer(),
less = require('less');
app.use(express.static(__dirname + '/static'));
app.set("view options", { layout: false })
app.use(express.bodyParser());
var demoCSS = "@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
  box-shadow:         @style @c;
  -webkit-box-shadow: @style @c;
  -moz-box-shadow:    @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box { 
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}";
app.get('/', function(req, res){
    less.render(demoCSS, function (e, css) {
        res.render('index.jade',{val:demoCSS,result:css});
    });
});
app.post('/',function(req, res){
    less.render(req.body.css, function (e, css) {
        if(e){
            res.render('index.jade',{val:req.body.css,result:"错误类型:"+e.type+"错误消息:"+e.message});
        } else {
            res.render('index.jade',{val:req.body.css,result:css});
        }
    });
});
app.listen(10080);


That's All.
依赖项:

less


express


jade



演示地址:http://less.aliapp.com/
源码打包下载:http://less.aliapp.com/latest.zip

原文引自:http://cnodejs.org/topic/4f16442ccae1f4aa2700103b

回复 · 0

发表回复

你可以在回复中 @ 其他人