让css动起来—-lesscss（2）

话说上次谈及lesscss的时候是去年11月份，传送门在 这里，上次介绍了lesscss的大部分应用和属性，随着2011年下半年 lesscss中文官网的出现，我觉得再多的介绍lesscss的使用已经没什么必要了，这部分的文章苏河主要给大家介绍下lesscss在项目中的应用。

下面是去年的一个项目部分使用lesscss的例子，lesscss我只做了部分尝试，就lesscss本身来说，它比较适合重用性比较高的代码（个人理解），如果是换肤的功能，我想lesscss再合适不过了。当然也有很多工程师喜欢lesscss的这种代码风格，如果它能够少了编译的这层环节，那么我认为不管是它的可维护性和可扩展性，易读性都会是大家选择它的原因。

上面是我的项目目录，之所以选择base作为试点是一来是因为base包含皮肤样式，字体样式，它是个重用性很高的地方，而其他模块则可以采取import的方式来引用base库，二来是因为base库不管是对现在的项目或者是以后的类似的拓展项目都有很高的重用性和扩展性。

首先是libs.less，大致介绍下的代码组成部分

常量

通常常量是定义的网页的基本全局的变量，比如字体颜色、背景颜色、超链接颜色等等，为了保证各个模块的一致性，我们定义常量来统一管理一张网页的基本设定，试想，如果有其他市场需要使用我们的样式，它们希望的只是皮肤的更改，那么我们只需要修改libs里面的常量就能达到牵一发动全身的效果了。

1. //constants
2. /*font*/
3. @red-font:#cc0000;
4. @blue-font:#1ac5e1;
5. @normal-font:#333;
6. @gray-font:#666;
7. @light-font:#b0b0b0;
8. @white:#fff;
9. /*background-color*/
10. @blue-back:#1AC5E1;
11. @red-back:#E40007;
12. @body-back:#fdf4e9;
13.  
14. /*width*/
15. @page-width:990px;

混合

在 LESS 中我们可以定义一些通用的属性集为一个class，然后在另一个class中去调用这些属性，这里我们用yui3的布局方式尝试

1. /* YUI3 inline-block*/
2. .inline-block(){
3.     display:inline-block;
4.     vertical-align:top;
5.     *display:inline;
6.     *zoom:1;
7. }
8. .grid-container(){
9.     letter-spacing:-0.31em;
10.     *letter-spacing:normal;
11.     word-spacing:-0.43em;
12. }
13. .grid-unit(){
14.     letter-spacing:noraml;
15.     word-spacing:noraml;
16.     .inline-block();
17. }

函数

我们定义一些公用的函数，然后在其他需要调用的地方使用这些函数，这里定义的函数比较多，具体说明可以直接看代码

1. /*reset css*/
2. .reset(){
3.     margin:0;
4.     padding:0;
5. }
6.  
7. /*wrap*/
8. //文字函数
9. .wrap () {
10.   text-wrap: wrap;
11.   white-space: pre-wrap;
12.   white-space: -moz-pre-wrap;
13.   word-wrap: break-word;
14. }
15. /*float*/
16. //浮动函数
17. .left(){
18.     float:left;
19.     *display:inline;
20. }
21. .right(){
22.     float:right;
23.     *display:inline;
24. }
25. .clear(){
26.     *zoom : 1;
27.     &:after{
28.         content: '\0020';
29.         display: block;
30.         height: 0;
31.         clear: both;
32.     }
33. }
34.  
35. /*img vertical*/
36. //图片居中函数，接受图片尺寸
37. //@注：本人非常喜欢这种风格的代码，闭包的形式让样式思路非常清晰，作用域的思路让代码更容易维护
38. .pic(@size:30px){
39.     overflow: hidden;
40.     width:@size;
41.     height:@size;
42.     a{
43.         display: table-cell; /*主流浏览器*/
44.         vertical-align: middle;
45.         text-align: center;
46.         /* IE6,7 hack */
47.         *display: block;
48.         *font-family: Arial;
49.         *line-height: 0;
50.         width:@size;
51.         height:@size;
52.         *font-size:@size*0.873;
53.         img{
54.             vertical-align: middle;
55.         }
56.     }
57. }
58.  
59. /*border-radius note: default value:3px*/
60. //圆角函数,低版本浏览器采用IE-CSS3
61. .border-radius (@radius:3px) {
62.     border-radius: @radius;
63.     -moz-border-radius: @radius;
64.     -webkit-border-radius: @radius;
65.     //IE
66.     behavior: url(ie-css3.htc);
67.     zoom:1;
68. }
69.  
70. /*gradient*/
71. //阴影函数，接受两个参数，初始颜色和结束颜色
72. .gradient(@fromcolor:#000,@tocolor:#fff){
73.     background: -webkit-gradient(linear, 0 0, 0 100%, from(@fromcolor), to(@tocolor));
74.     background: -moz-linear-gradient(top, @fromcolor, @tocolor);
75. }

接下来是关于libs.less的引用，具体体现在base.less

base.less主要是base库的主要部分，它负责生成一些公用的样式供其他业务模块使用，通过引用libs.less来生成自己希望得到的样式

1. @import 'libs.less';
2.  
3. /*-------------------------------------------------------------------------------
4. * Author:      suhe <[email protected]>
5. * Desc: Less版本的base
6. -----------------------------------------------------------------------------*/
7.  
8. /*-----=Reset: -----------------------------------------------{{{1*/
9.  
10. html{ overflow-y:scroll;}
11. //常量使用
12. body{
13.         background-color: @body-back;
14. }
15. //libs函数的调用
16. pre { .wrap }
17.  
18. ul,li{
19.     .reset;
20. }
21.  
22. /*--------------------------------------------------------END-}}}1*/
23.  
24. /*-----=Common Class:  -----------------------------------------{{{1*/
25. //作用域和函数的结合使用
26. .grid{
27.     .grid-container();
28.     .g-u{
29.         .grid-unit();
30.     }
31. }
32.  
33. .floatleft { .left() }
34.  
35. .floatright { .right() }
36.  
37. .clearfix { .clear() }
38.  
39.  
40. /*-----=图片居中---------------------------------{{{2*/
41. //函数多次调用体现less的重用性
42. .s30{
43.     .pic(30px);
44. }
45. .s60{
46.     .pic(60px);
47. }
48. .s80{
49.     .pic(80px);
50. }
51.  
52. /*-----=图片居中---------------------------------{{{2*/
53.  
54.  
55. /*----------------------------------------------END-}}}2*/
56.  
57. /*--------------------------------------------------------END-}}}1*/
58. //常量的使用
59. #content{
60.     width:@page-width;
61.     margin:0 auto;
62. }

以上介绍两个模块作为lesscss的初步尝试，至于其他的业务模块的尝试也同base差不多，所以不多做介绍。

结束语

我觉得有必要补充一点，就是关于lesscss的服务器环境配置，随着现在node在windows平台的完善，个人觉得lesscss的使用简单了许多，笔者曾经采用的是.NET的编译环境，现在也将环境随之迁移至node。当然，题外话，如果将less编译的工作放在部署机器，而客户端只需要引入less.js来验证效果，部署机器做filter工作过滤lesscss.js然后做替换，这样的方案会比较完美些。

现在IDEA11已经有了less的插件支持，这个非常赞，相信在node环境下做个多模块一键编译的工具不会太难，这样一来，less的很多瓶颈得到了解决，相信less在不久的将来会有越来越大的用户群。