less.js使CSS更简单、更整洁、更高效

LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。– http://www.lesscss.net/

不记得是什么时候就见到过LESS.JS的介绍，但一直未接触与了解。因最近在熟悉Twitter Bootstrap的结构时，看到了Mark Otto和Jacob Thornton推荐了LESS.JS时，就花点时间学习了一下。(国内的dnspod正是基于Twitter Bootstrap而成，建议看看~)
如何将less.js引入到页面中使用？
官网给了段示例代码，如下：

引入你的 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”:

然后在head中引入:

注意你的less样式文件一定要在引入less.js前先引入。

备注：请在服务器环境下使用！本地直接打开可能会报错！(服务器环境配置LESS.JS目前我尚还不知，有会的大虾还请多指教呀~)

在head头部引入后，就可以在styles.less中动工了，看个简单的示例：

	//定义点变量
	@blue:                  #049cdb;
	@blueDark:              #0064cd;
	@gray:                  #999;

	@baseFontSize:          13px;
	@baseLineHeight:        18px;
	@baseFontFamily: 		"Microsoft Yahei", "Segoe UI", Tahoma, Arial;

	//应用
	body {
		color: @gray;
		font-family: @baseFontFamily;
		font-size: @baseFontSize;
		line-height: @baseLineHeight;
	}


	div {
		background:@blue;
		border:5px solid @blueDark;
		width:300px;
		height:300px;
		margin:50px auto;
	}

来看看客户端浏览器编译后的结果：

		body {
		  color: #999999;
		  font-family: "Microsoft Yahei", "Segoe UI", Tahoma, Arial;
		  font-size: 13px;
		  line-height: 18px;
		}
		div {
		  background: #049cdb;
		  border: 5px solid #0064cd;
		  width: 300px;
		  height: 300px;
		  margin: 50px auto;
		}

是不是很简单？呵呵~可能看了这段代码，不免产生疑问，这起到什么作用了？代码怎么简洁了？不仿看看下面两帖：
Quick Tip: Never Type a Vendor Prefix Again (视频教程需翻墙才能看~)

Twitter Bootstrap: Using Less with Bootstrap

对less.js用法描述得比较详细的可参考：用LESS管理你的CSS，高效、可维护
或许感觉到了些什么吧？

我在实际测试时，发现用这样引入的方式，没法使用Bootstrap提供的Less资源，为了能够利用起来，我在Less.org官网上找到了其推荐的几款windows下的工具，如：SimpleLess、LESS2CSS、WinLess等，具体可至http://less.cnodejs.net/tools下载测试