less 全稱 lesscss 看名字就知道跟css有關了，
我的理解 less就是爲了簡化大量的css代碼而出現的，當你用了less之後，可以把你的css代碼，
規範化，模塊化，便於維護和重構。
less分爲客戶端和服務器端。
客戶端：
首先下載less.js
http://lesscss.org
下載完成後把他引入到你的頁面中，在此我用的是node express 和 ejs-locals
就像這樣
首先是app.js
/**
* Module dependencies.
*/
var express = require('express')
, mongoose = require('mongoose')
, UserModel = require('./models/user')
, User = mongoose.model('User')
, MongoStore = require('connect-mongo')(express)
, siteRoute = require('./routes/site')
, user = require('./routes/user')
, http = require('http')
, path = require('path')
, flash = require('connect-flash')
, ejs = require('ejs-locals')
, setting = require('./setting');
var app = express();
app.configure(function(){
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
console.log(ejs);
app.engine('html', ejs);
app.set('view engine', 'html');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser());
app.use(flash());
app.use(express.session({
secret: setting.cookieSecret,
store: new MongoStore({
db: setting.db
})
}));
app.use(app.router);
//app.use(require('stylus').middleware(__dirname + '/public'));
app.use(express.static(path.join(__dirname, 'public')));
});
app.configure('development', function(){
app.use(express.errorHandler());
});
mongoose.connect('mongodb://localhost/game-maker');
// Routes
// index
app.get('/login', siteRoute.login);
app.post('/register', siteRoute.register);
app.get('/', function(req, res){
res.render('index', {
title: 'Test'
});
});
app.post('/generate',siteRoute.generate);
app.get('/down',siteRoute.download);
var db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function callback () {
app.listen(process.env.PORT || 3000);
console.log(path);
});
上面的配置後，就可以用後綴是html來解析ejs了。
layout.html
<%-blocks.lesscss%>
<script type="text/javascript" src="js/lib/less/less-1.7.0.min.js"></script>less文件要在 less.js文件之前引入
單獨頁面 index.html
<% block('lesscss', "<link rel='stylesheet/less' href='stylesheets/index/index.less'>") -%>注意 rel=stylesheet/less
@the-border: 1px;
@base-color: #333;/*只能爲數字*/
@red: #842210;
@less-div-width: 200px;
@less-div-height: 200px;
@base-font:13px Helvetica, arial, freesans, clean, sans-serif;
.rounded-corners (@radius: 5px) when (isnumber(@radius)){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
.float(@position) {
float:@position;
}
#header {
display:none;
}
.less-div {
.float(left);
width:@less-div-width;
height : @less-div-height;
color: (@base-color * 3); /*嚴格要求加括號*/
border: @the-border solid (@base-color * 3);
}
.less-div {
p {
color:#B91363;
}
input {
color:#B91363;
width:100px;
}
}
.less-div {
.rounded-corners(6px);
}
#less-select {
float:right;
width:100px;
}
.aug-ui {
.float(left);
width: 300px;
}
.less-input {
font:@base-font;
width: 472px;
height: 207px;
}
.less-output {
width: 472px;
height: 207px;
}然後刷新，可以看到經過less.js編譯後的css在head標籤內。
服務器端less:
首先下載node less擴展
npm install less
引入之
less = require('less')然後就可以用它來解析和編譯less了
var parser = new(less.Parser);
var demoCss1 = "@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, 5%);\n border-color: lighten(@base, 30%);\n div { .box-shadow(0 0 5px, 30%) }\n}"; parser.parse(demoCss, function (err, tree) {
if (err) {
return console.error(err)
}
fs.writeFile('upload/less.css', tree.toCSS(), function (err) {
if (err) throw err;
});
res.json(200, { message: 'OK',data:tree.toCSS() });
});上面的代碼和用來把解析後的css字符串存入文件中。
很簡單的代碼，同樣，可以用grunt來解析和編譯less
需要下載node grunt less 擴展
npm install grunt-contrib-less
在此之前要先下載grunt 和 grunt-cli，順便附上package.json，照着這個文件 直接npm install就全裝完了
{
"name": "application-name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app"
},
"dependencies": {
"express": "3.1.0",
"stylus": "*",
"connect-mongo": ">= 0.1.7",
"mongoose": "3.6.4",
"connect-flash": "~0.1.0",
"ejs": "*",
"ejs-locals": "*",
"less": "*"
},
"devDependencies": {
"grunt": "^0.4.4",
"grunt-cli" :"*",
"grunt-contrib-less": "^0.11.0"
}
}
如果執行grunt 報錯，就重新安裝一下grunt-cli
sudu npm install -g grunt-cli
然後創建 Gruntfile.js文件，就像這樣
module.exports = function (grunt) {
grunt.initConfig({
less: {
compile: {
files: { //dest //src
'public/stylesheets/index/index.css': 'public/stylesheets/index/index.less',
}
}
},
watch: {
scripts: {
files: ['css/*.less'],
tasks: ['less']
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
//grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['less']);
};https://github.com/gruntjs/grunt-contrib-less
然後在 控制檯裏運行grunt就OK 了！