正常的CSS样式表写起来比较繁琐,用【Less 动态 样式 语言】模式来写就方便多了

LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承,运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。

直接上例子

Global里都是公共的一些变量和类似于函数的东西,方便后期修改拓展以及减少重复代码,省时省力

Main里是样式主体开始里面可以直接引用Global定义的变量及函数

  1. /* -------------------- Global Start -------------------- */ 
  2. @bgcolor:       #ae1b8d
  3. @nav_bgcolor:   #000
  4. @nav_font:      #fff
  5. @popbgcolor:    #666
  6. @popfonthover:  #fff100
  7. .setSize(@width, @height) 
  8.     width: @width; 
  9.     height: @height; 
  10.     overflowhidden
  11. .setFont 
  12.     color:@nav_font; 
  13.     font-size:12px
  14. .setAlpha(@ie, @nie) 
  15.     opacity:@nie; 
  16.     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=@ie); 
  17.  
  18. /* -------------------- Main Start ---------------------- */ 
  19. .nav-ch 
  20. {  
  21.     .setSize(950px25px); background:@nav_bgcolor; 
  22.     .skin-box-bd { .setSize(950px25px); 
  23.         .all-cats a.link{ 
  24.             height:25px
  25.             background:@bgcolor; 
  26.             .setFont; 
  27.             line-height:25px
  28.             width:85px
  29.             border:0
  30.             cursor:pointer
  31.             span { *margin-left:5px; } 
  32.             .popup-icon { background:url(assets/p_w_picpaths/classall_icon.jpg) no-repeatmargin-top5px; } 
  33.         } 
  34.         .menu-list .menu a{ 
  35.             height:25px
  36.             background:none
  37.             .setFont; 
  38.             border:0
  39.             line-height:25px
  40.             cursor:pointer
  41.             &:hover { background:@bgcolor; } 
  42.         } 
  43.         .all-cats-popup 
  44.         { 
  45.             background:@nav_bgcolor; 
  46.             border:0
  47.             .setAlpha(880.88); 
  48.             .cat 
  49.             { 
  50.                 &.cat-hd-hover { background:@popbgcolor; } 
  51.                 h4 { 
  52.                     font-weight:normal
  53.                     a { color:@nav_font; } 
  54.                 } 
  55.                 .snd-pop-inner { background:@popbgcolor; a:hover { color:@popfonthover; } } 
  56.             } 
  57.         } 
  58.     } 

以上样式运行后生成以下结果:

  1. /* -------------------- Global Start -------------------- */ 
  2. .setFont { 
  3.   color#ffffff
  4.   font-size12px
  5. /* -------------------- Main Start ---------------------- */ 
  6. .nav-ch { 
  7.   width950px
  8.   height25px
  9.   overflowhidden
  10.   background#000000
  11. .nav-ch .skin-box-bd { 
  12.   width950px
  13.   height25px
  14.   overflowhidden
  15. .nav-ch .skin-box-bd .all-cats a.link { 
  16.   height25px
  17.   background#ae1b8d
  18.   color#ffffff
  19.   font-size12px
  20.   line-height25px
  21.   width85px
  22.   border0
  23.   cursorpointer
  24. .nav-ch .skin-box-bd .all-cats a.link span { 
  25.   *margin-left5px
  26. .nav-ch .skin-box-bd .all-cats a.link .popup-icon { 
  27.   backgroundurl(assets/p_w_picpaths/classall_icon.jpg) no-repeat
  28.   margin-top5px
  29. .nav-ch .skin-box-bd .menu-list .menu a { 
  30.   height25px
  31.   backgroundnone
  32.   color#ffffff
  33.   font-size12px
  34.   border0
  35.   line-height25px
  36.   cursorpointer
  37. .nav-ch .skin-box-bd .menu-list .menu a:hover { 
  38.   background#ae1b8d
  39. .nav-ch .skin-box-bd .all-cats-popup { 
  40.   background#000000
  41.   border0
  42.   opacity: 0.88
  43.   filter: progid:dxp_w_picpathtransform.microsoft.alpha(opacity=88); 
  44. .nav-ch .skin-box-bd .all-cats-popup .cat.cat-hd-hover { 
  45.   background#666666
  46. .nav-ch .skin-box-bd .all-cats-popup .cat h4 { 
  47.   font-weightnormal
  48. .nav-ch .skin-box-bd .all-cats-popup .cat h4 a { 
  49.   color#ffffff
  50. .nav-ch .skin-box-bd .all-cats-popup .cat .snd-pop-inner { 
  51.   background#666666
  52. .nav-ch .skin-box-bd .all-cats-popup .cat .snd-pop-inner a:hover { 
  53.   color#fff100

less非常灵活,样式结构化,可以定义变量、函数、样式集合;可以嵌套、支持伪类

less官方网站:http://www.lesscss.net