最近在网上看到1个很有意思的CSS扩展,这里介绍给大家。LESS 最早是1个ruby的gem,用于扩展css的语法,用了LESS后,可以在css中使用变量,运算符,include,嵌套规则等等。现在LESS出了js版本,让我们一起来看看LESS能为我们带来什么吧?
使用
1. 下载js: http://lesscss.googlecode.com/ 最新版本好像是 1.0.22
2. 使用less,css文件的后缀名需要改为.less。
3. 在html页面中加入下面代码
<!-- style.less文件就是样式表文件,并且style.less必须放在less-1.0.22.min.js文件前加载,原理后面介绍 -->
<link rel="stylesheet/less" href="style.less" />
<script src="less-1.0.22.min.js"></script>
变量
变量可以让我们声明1个常量值,并在以后多处地方进行重复使用。
一般css写法:
1
2
3
4
5
6
7
8
9
|
.class
1
{
color
:
#ccc
;
width
:
100px
;
}
.class
2
{
color
:
#ccc
;
width
:
120px
;
}
|
LESS写法:
1
2
3
4
5
6
7
8
9
10
11
|
@color
1:
#ccc
;
.class
1
{
color
:@color
1
;
width
:
100px
;
}
.class
2
{
color
:@color
1
;
width
:
120px
;
}
|
inlucde
大家一定碰见过再某个规则中需要用的部分样式跟另外1个规则样式一样,但没办法,我们只能copy过来,或者为元素指定多个class。但用了LESS后,我们不再需要这么痛苦了。
一般css写法:
1
2
3
4
5
6
7
8
9
|
.
red
{
color
:
red
;
border
:
1px
solid
red
;
}
.class
2
{
width
:
100px
;
font-size
:
12px
;
/*下面的样式跟red的一样,copy过来的,修改就要修改2处*/
color
:
red
;
border
:
1px
solid
red
;
}
|
LESS写法:
1
2
3
4
5
6
7
8
9
|
.
red
{
color
:
red
;
border
:
1px
solid
red
;
}
.class
2
{
width
:
100px
;
font-size
:
12px
;
/*直接inlcude .red的规则*/
.
red
}
|
嵌套规则:
一般css的写法:
1
2
3
|
#header{
color
:
red
;}
#header .logo{backgroud-image:
url
(logo.gif);}
#header li{
display
:
block
;}
|
LESS写法:
1
2
3
4
5
6
7
8
9
|
#header{
color
:
red
;
.logo{
backgroud-image:
url
(logo.gif);
}
li{
display
:
block
;
}
}
|
运算符:
LESS 写法:
1
2
3
4
5
6
7
|
@fontSize
12px
;
.class
1
{
font-size : @fontSize +
2
;
}
.class
2
{
font-size : @fontSize *
2
;
}
|
更多其它功能:
请见LESS官方网站:
http://lesscss.org/
原理分析:
LESS js版本的实现方式是使用ajax获取style.less文件,然后根据该文件的规则生成最终浏览器能理解的css插入到html代码中。所以就出现前面说过的<link rel="stylesheet/less" href="style.less" />必须在js前面。
总结:
LESS JS版本的实现原理,是每次请求都需要通过JS去动态生成原始的css,如果css比较大的话,对于客户端的性能影响比较大,所以个人觉的less的js版本实用性不强。
不知道LESS 的ruby版本的实现原理是怎么样的,我认为如果真的觉得less方式可以提高css的开发效率,到是可以参考它的代码实现一套java或net的源代码,在程序启动的时候一次根据.less文件生成所有的css文件,而不是每次请求都用js动态生成。
PS:刚刚无意间搜索,竟然找到1个net版本的less,大家可以看看这个版本怎么实现的:
http://www.dotlesscss.com/
本文转自BearRui(AK-47)博客园博客,原文链接:http://www.cnblogs.com/BearsTaR/archive/2010/07/01/less.html
,如需转载请自行联系原作者