一直以来，都是使用JS扩展的比较多还没有使用过CSS的扩展，最近看到一个CSS的扩展叫做LESS；LESS最早是1个ruby的gem，用于扩展css的语法，前段时间出来了一个JS版的，看看先。
使用方法：
1. 下载js: http://lesscss.googlecode.com/ 现在最新版本好像是 1.0.33
2. 使用less，css文件的后缀名需要改为.less。
3. 在html页面中加入下面代码
<!-- LESS.less文件就是样式表文件，并且LESS.less必须放在less-1.0.33.min.js文件前加载并且Type一定要是text/less，切记是一定！ -->
<link type="text/less" rel="stylesheet/less" rev="stylesheet/less" href="LESS.less" />
<script language="javascript" type="text/javascript" src="less-1.0.33.min.js"></script>
值得注意的是link的type属性必须要是text/less，之前用习惯了text/css结果死活就是没有效果。切记切记。
HTML的基本代码如下：
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>LESS CSS</title>
6. <!-- LESS.less文件就是样式表文件，并且LESS.less必须放在less-1.0.33.min.js文件前加载并且Type一定要是text/less，切记是一定！ -->
7. <link type="text/less" rel="stylesheet/less" rev="stylesheet/less" href="LESS.less" />
8. <script language="javascript" type="text/javascript" src="less-1.0.33.min.js"></script>
9. </head>
10. <body>
11. <div class="div1">TEST1...</div>
12. <div class="div2">TEST2...</div>
13. <div class="div3">TEST3...</div>
14. <div class="div4">
15. <div>
16. <span>SPAN</span>
17. </div>
18. <span>SPAN</span>
19. </div>
20. <div class="div5">TEST5...</div>
21. <div class="div6">TEST6...</div>
22. </body>
23. </html>后面的样式都是在那个LESS.less文件中所定义。
1.定义变量
1. @colors:#333;
2. .div1
3. {
4. color:@colors;
5. font-weight:bold;
6. background-color:#CCC;
7. }这样就可以实现：当需要修改颜色的时候只需要修改一处即可。
2.样式内嵌
1. .div3
2. {
3. border:#222 solid 1px;
4. .div1
5. }这样可以直接嵌入.div1的样式而无须复制代码了。
3.嵌套规则
1. @fonts:12px;
2. .div4
3. {
4. border:#333 solid 1px;
5. padding:10px;
6. div
7. {
8. background-color:red;
9. span
10. {
11. color:red;
12. }
13. }
14. span
15. {
16. background-color:@colors;
17. font-size:@fonts * 2;
18. }
19. }这样可以使样式的名称更为的简短，并且修改的时候好找一些，因为都在一块嘛。
4.样式运算
代码见嵌套规则代码中的最后一个span标签的font-size属性。
好处类似于定义变量的好处。
5.样式传参
1. .div5(@widths:5px)
2. {
3. color:red;
4. border-style:solid;
5. border-color:@colors;
6. border-width:@widths;
7. }
8. .div6
9. {
10. .div5(10px);
11. }这个的好处就不言而喻了吧？个人最喜欢这个的啦。类似于编程语言中的函数定义、调用、传参。呵呵，很是惬意咧…（如需DOME，请狂点此处。不知道为什么，LESS.less这个文件明明是存在的，服务器上就是找不到[报的404错误]，可能是服务器阻止解析less结尾的文件吧。不过没关系，我已经将它打包好了，需要的话，大家可以将其下载自行使用IIS浏览，DOME在此。）
LESS官方网站：http://lesscss.org/
LESS原理:
LESS js版本的是使用ajax获取LESS.less文件，然后根据该文件中所定义的规则生成最终浏览器能理解的css，然后再将其插入到html代码中。所以就出现前面说过的<link rel="stylesheet/less" href="LESS.less" />必须在js前面。
PS：可能是因为安全限制的原因，IE和Chrome无法查看到LESS的效果的（报的是HTTP404错误），必要的话，大家可以用IIS或者是FireFox、Opera、Safari来浏览。
基于LESS JS版本的实现原理，是每次请求都需要通过JS去动态生成原始的css，那么如果css比较大的话，对于客户端的性能影响比较大，所以个人觉的LESS的js版本实用性不强。
