使用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写代码还是比较爽的,大家可以试试。挺有意思的。

posted on 2012-03-12 20:02  KohPoll  阅读(900)  评论(2编辑  收藏  举报