使用less以及相关工具
最近开始试着使用less（http://lesscss.org，外国的链接被墙了，中文的在这里：http://www.lesscss.net/）。它可以帮助我们更有效率的写css。还有其它的实现，如：sass（http://sass-lang.com/tutorial.html）。
（一）简介
简单说，less让css变得有些像一门”真正的“编程语言，支持变量定义、运算、函数等等特性。而且，还可以直接在less中调用js的函数。使用它的方法的话，一般有2种。
1）可以选择在页面直接包含.less的文件，然后使用一个js来对它进行处理（编译），处理后就是真正的css文件了。如：
<link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script>2）开发阶段使用less编写，发布时，将它编译为css再发布。这就需要less的”编译器“了，如果有装nodejs的话，可以直接将它安装成node的模块。（详细介绍，见官网）
（二）语法（完全参考自http://www.lesscss.net/，那里更详细）
1.注释
/*这个注释，编译会仍然保留*/
//这个注释，编译后会被去掉
2.变量定义及计算
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }
编译后为=>
#header { color: #6c94be; }
3.混合（mixin）
.border-radius (@radius: 1px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
.button {
.border-radius(6px);
}
编译后为=>
.button {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
4.嵌套
#header {
color: black;
.navigation { font-size: 12px; }
.logo {
width: 300px;
&:hover { text-decoration: none; }
}
}
编译后为=>
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
#header .logo:hover {
text-decoration: none;
}
5.字符串插值
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
编译后为=>
background-image: url("http://assets.fnord.com/images/bg.png");
还有，另外一种写法是这样（使用类似函数的%）：
.gradient (@start_color, @end_color) {
filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=@{start_color}, endColorstr=@{end_color})";
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d)", @start_color, @end_color);
}
6.导入其它文件
@import "lib.less";
//还可以不带后缀：
@import "lib";
//导入一个CSS文件而且不想LESS对它进行处理
@import "lib.css"
7.命名空间
#bundle {
.button () {
display: block;
border: 1px solid black;
background-color: #ddd;
&:hover {
background-color: white;
}
}
}
#header a {
color: orange;
#bundle > .button;
}
编译后为=>
#header a {
color: orange;
display: block;
border: 1px solid black;
background-color: #ddd;
}
#header a:hover {
background-color: white;
}
（三）相关工具
由于我主要使用windows，就在找windows平台下的less”编译器”，结果找到了2个实现。
1）https://github.com/cloudhead/less.js/ 这个是使用windows host script来实现的。下载后将其路径加到path里，就可以使用命令行：lessc input.less [output.css] [-compress]来调用了。
2）http://leafo.net/lessphp/ 这个是使用php实现的，需要php支持。下载后将其路径加到path里，同时可以在其目录下建一个plessc.bat的批处理文件，添加这样的代码：
@echo off
php %~dp0plessc %*
%~dp0展开后是当前批处理文件所在目录，%*则是传给该批处理文件的所有参数。上面的代码就是用php来运行plessc这个文件，并且传入所有额外的参数。这样，我们就可以很方便的使用命令行像这样来使用：plessc input.less > output.css。更多用法见这里：http://leafo.net/lessphp/docs/。
折腾完“编译器“后，就要开始折腾工具对less的支持了。
1.由于我主要使用vim，就开始找vim上的less语法插件，结果居然没有～本着”自己动手，丰衣足食”的精神，我就参考着scss和css的语法文件，写了一个less的语法插件。下载在这里：http://www.vim.org/scripts/script.php?script_id=3964。
这个语法插件是自己第一次写插件，必然会有很多问题，以后慢慢来完善。在写这个语法文件时，遇到的主要问题是：实在是不知道怎么准确定义less的mixin和namespace，因为它们和css的class选择器、id选择器、子元素选择器实在是太像了。我的解决方法是：1）不定义mixin的声明部分，让它和class选择器的颜色一致（因为个人理解，mixin其实就很类似一个class，一样可以重用很多次，而且可以带参数重用），然后对mixin的使用部分，定义为和css的属性的颜色一致以示区分。2）让namespace的#namespaceName部分和id选择器的颜色一致，后面的部分就和mixin颜色一致。最后就是这样的颜色：
2.文件有了一定的颜色后，看起来舒服多了。不过，自动缩进的话，其实还是比较差（这个后面再研究怎么写缩进插件）。重要的是能不能让less“编译”为css的过程自动化呢？使用vim的话，当然是可以的。
上面的2种实现，我选择的是windows host script的实现方式。然后，我在自己的vimrc里面加入了这样的代码：
"编译当前less文件，保存为同名的css文件，将错误echo显示
func! CompileLess()
let l:filePath = shellescape(expand("%:p"))
let l:outputFilePath = shellescape(expand("%:p:r") . ".css")
let l:cmd = "lessc " . l:filePath . " " . l:outputFilePath
let l:errs = system(l:cmd)
echo l:errs
endfunc
" 自动编译less
autocmd! BufWritePost,FileWritePost *.less call CompileLess()
这样子，就可以在写入less文件时，自动调用lessc来编译less文件了。（不过，好像更牛的方法是可以监视less文件的改变，改变时就编译，这个貌似php的实现有提供命令。我觉得在保存时就编译比较自然，就选择了这个方法。）
总体说来，用less写代码还是比较爽的，大家可以试试。挺有意思的。
