用了LESS 之后感觉效率并没有多大提升，反而增加了维护成本，是我使用方法不对？

新]

1，使用变量@red:#F00这种，修改大量CSS数据的时候LESS表现最好；而且还会修改到fade(@red,10%);这种规则；使用常规的批量替换，上面的是要一遍遍修改的；
其次，

.colors{
    color:@white;.tmp(@color:@flat){background-color:@color;}
    &.flat{.tmp(@flat);color:@grayd;}
    &.red{.tmp(@red)}
    &.redd{.tmp(@redd)}
 }

这种方式编写大量皮肤的框架出来；更出色；只需要页面 div.colors.flat、div.colors.red就可以有多套皮肤了；

2，再chrome内调试最好koala生成map文件，chrome开启map调试；这样就可以在chrome调试器里的选择符直接看到规则在LESS文件的行数了；不过个人建议，书写less的时候，页面直接挂载less文件，使用less.js方式实现也页面的css渲染；毕竟少了一步生成的步骤；两种方式任选；PS：koala生成的map可能不是那么准；

3，LESS的嵌套，反正两方面说：一方面，less的嵌套可以减小html的类标签量，让html更小，更加结构化；另一方面，LESS嵌套减小的CSS的适用范围，可能需要书写更多的标签去适用不同的hTML结构；不过好在，有这种写法.red{.tmp(@red)}；甚至还可以中途跳出嵌套；

div#slider{
    span{
        width:300px;
    }
    section.sunny & span{
        width:200px;
    }
}

这种用法不知道算是bug还是逻辑坑...O(∩_∩)O~

最后一个PS：写LESS的时候注意考虑一下CSS的大小；LESS因为可以嵌套和引用，很容易LESS16K，生成的CSS却64K了；

如图，表吧所有的样式堆到一个less，主LESS只链接小LESS,例如；

@charset "UTF-8";

@import "./less/color.less";
@import "./less/reset.less";
@import "./less/rules.less";
@import "./less/grid.less";
@import "./less/size.less";
@import "./less/animate.less";

@import "./less/btn.less";
@import "./less/bar.less";
@import "./less/loader.less";
@import "./less/slider.less";
@import "./less/list.less";
@import "./less/decoration.less";
@import "./less/form.less";
@import "./less/seek.less";

@import "./newyear.less";

而小LESS，则只负责部分功能或部分区域，但是使用全局变量，比如字体大小啦、颜色啦，这样修改起来更快；如图: