什么是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](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base): #f938ab;\n.box-shadow(@style, @c) when (iscolor(@c)) {\n box-shadow: @style @c;\n -webkit-box-shadow: @style @c;\n -moz-box-shadow: @style @c;\n}\n.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {\n .box-shadow(@style, rgba(0, 0, 0, @alpha));\n}\n.box { \n color: saturate([[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[@base](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base), 5%);\n border-color: lighten([[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[@base](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base)](/user/base), 30%);\n div { .box-shadow(0 0 5px, 30%) }\n}";
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
