3
LESS介绍
Posted by reedboat on Dec 11, 2010 in web
CSS虽然大大简化和扩展了网页的样式编写,但是CSS是个无逻辑的标记语言, 很多东西仍然难以复用，显得十分冗长。 虽说也可以用动态语言编写，但是不原生和直观，也不便于缓存。
最近看到一个工具，叫做LESS，也可以称为LESS语言，挺有意思的。官方网站 http://lesscss.org。 它为CSS引入了非常有用的几个编程特性,这几个特性十分的优雅，感觉CSS原本就该是这样的(或许以后真的会成为CSS的核心?)。
这些特性包括:
- Variables(变量支持,实际上是常量，不能修改)
- Mixins(类似函数,支持参数, 直接借用前面定义的样式模块)
- Nested Rule(嵌套定义)
- Operation(运算符,支持尺寸,颜色,变量的加减乘除)
- Comments(支持C风格的单行注释)
- Namespace(名称空间,用于对样式分组或者封装)
- Scope(作用域，本地变量优先与全局变量)
- Import(文件包含，可以导入less文件，变量可以跨文件生效)
可以看看下面的样式定义
@nice-blue: #5b83ad
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }
.rounded_corners (@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded_corners;
}
#footer {
.rounded_corners(10px);
}
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
:hover { text-decoration: none }
}
}
@base: 5%;
@filler: @base * 2;
@other: @base + @filler;
.test {
color: #888 / 4;
height: 100% / 2 + @filler;
}
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }
.rounded_corners (@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded_corners;
}
#footer {
.rounded_corners(10px);
}
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
:hover { text-decoration: none }
}
}
@base: 5%;
@filler: @base * 2;
@other: @base + @filler;
.test {
color: #888 / 4;
height: 100% / 2 + @filler;
}
LESS完全兼容原来的CSS语法,也就是说原有的css，直接将后缀改成LESS, 完全能够正常的工作。
使用一个LESS编译器lessc，即可将LESS语言编译成CSS。目前的lessc编译器有官方的版本，是用ruby写的。还有用php实现的版本(http://leafo.net/lessphp/#quickstart)和用js实现的版本(http://leafo.net/lessphp/#quickstart)。
用js写的版本，不用自己编译，只需要在页面引入一段js即可，非常的方便，对于使用html5的浏览器，支持客户端本地存储的话，那么完全不用担心效率问题。
一般来说可以使用php版本或者ruby版本，在服务器端编译好。这个工作完全可以交给程序，来自动化处理。
