nodejs less 配置相关

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

然后就可以编辑自己的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