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

1831-write-simple-css-with-less-thumb
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下载测试

4 thoughts on “less.js使CSS更简单、更整洁、更高效”

  1. After reading your blog post I browsed your website a bit and noticed you aren’t ranking nearly as well in Google as you could be. I possess a handful of blogs myself and I think you should take a look here: http://dominateseowithwordpress.com You’ll find it’s a very nice tool that can bring you a lot more visitors. Keep up the quality posts

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注