让你像写代码般写css

写惯了各种代码,到了css,你会不会觉得copy/paste的操作特别多呢?会不会发现一修改配色就要来一次"全部替换"?

前段时间我老大呢介绍了国外一神器,lesscss,不过主页被墙...有身高优势的童鞋可以翻过去http://lesscss.org/ 先从使用方法上说吧, 可以使用变量.把颜色什么的用变量代替,Like

@tastyColor: #21A6CE;
.a{color:@tastyColor}

这样都行?嗯,好处是你可以不用"全部替换"法来解决配色问题. 有变量,也要有函数了~

.high-light (@weight: 1px){
	border:@weight solid #000
}

这是"函数",我们可以看到还有参数,参数还带默认值(java无法设默认值的飘过),在其他地方可以调用了

.button{
	.high-light
}
.button-weight{
	.high-light(2px)
}

是不是很简单? 嵌套有没有写下面代码的经历?

#header{...}
#header .id {...}
#header .search {...}
#header .search button{...}

到lesscss可以这样写

#header{
	... /*header的css代码*/
	.id {
		... /*#header .id 的代码*/
	}
	.search{
		... /*#header .search 的代码*/
		button {
			... /*#header .search button的代码*/
		}
	}
}

好了,关于语法就不再说,还有其他的,自己去google 关于lesscss的工作原理,lesscss有两种工作方式, 第一种,下载他的js文件,在网页中加载less文件和他那个less.js(less文件是写上文所说的简洁写法) 第二种靠谱点,直接用程序将less文件转换为css文件,与其说转换,不如说是翻译. 我是更倾向于用第二种,第二种只要在你修改的时候生成一遍css,第一种则是在用户看你网页的时候再进行翻译,可能效果的加载会比较慢怎么生成呢,在ubuntu下很简单先下载安装,

sudo apt-get install libnode-less

然后执行

lessc style.less style.css

就可以把less风格的代码翻译成真正css风格的代码

chzyer/write-css-with-lesscss.md