LESS 让css也支持变量，运算符，include,嵌套规则等等

最近在网上看到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写法：

view source

print?1 .class1{

2 color:#ccc;

3 width:100px;

4 }

5

6 .class2{

7 color:#ccc;

8 width:120px;

9 }



LESS写法:
view source

print?01 @color1: #ccc;

02

03 .class1{

04 color:@color1;

05 width:100px;

06 }

07

08 .class2{

09 color:@color1;

10 width:120px;

11 }


inlucde
大家一定碰见过再某个规则中需要用的部分样式跟另外1个规则样式一样，但没办法，我们只能copy过来，或者为元素指定多个class。但用了LESS后，我们不再需要这么痛苦了。

一般css写法：
view source

print?1 .red{

2 color:red;border:1px solid red;

3 }

4

5 .class2{

6 width:100px;font-size:12px;

7

8 color:red;border:1px solid red;

9 }


LESS写法:
view source

print?1 .red{

2 color:red;border:1px solid red;

3 }

4

5 .class2{

6 width:100px;font-size:12px;

7

8 .red

9 }


嵌套规则:
　　一般css的写法：
view source

print?1 #header{color:red;}

2 　　#header .logo{backgroud-image:url(logo.gif);}

3 　　#header li{display:block;}

LESS写法:
view source

print?1 #header{

2 color:red;

3 .logo{

4 backgroud-image:url(logo.gif);

5 }

6 li{

7 display:block;

8 }

9 }


运算符：
　　LESS 写法:
view source

print?1 @fontSize 12px;

2 .class1{

3 font-size : @fontSize + 2;

4 }

5 .class2{

6 font-size : @fontSize * 2;

7 }


更多其它功能:
　　请见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/