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

Question

最近做项目中开始试着使用LESS 来写CSS ,用koala来实时编译。说几点体会吧。

比较方便的是可以声明一个公共的常量，但可以 @ red:#f00 这样来声明数值，也可以用.red{ color:#f00} 这样写一个公用class， 两者都可以引用。何种方式更好点现在还没有体会到。

1. 嵌套式的结构 ｛｛｝｝ 写起来还可以但可读性确实一般。没体会到有什么优势。

2. 在chrome调试面板里看到的是 style.css，如需调整都是直接显示style.css中对应的行数

，如果再回 style.less 中 调整，只能搜索 class类名，很不方便。
以上是比较体会深刻的几点，不知道各位有什么好的建议，因为刚使用一周，可能不太习惯还是我的用法有问题？

Answer 1

[更新]

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

Answer 2

Less 编译成 CSS 的时候要生成 sourcemap，Koala 中具体的做法参考这里，这样在 Chrome 中进行调试的时候就会把 style.css 换成对应的 .less 文件。可能需要在 Chrome DevTools 的配置项中先设置一下，如下：

Answer 3

1.{{}}这种嵌套语法，不是让你有多么好的可读性，而是让你能够模块化维护。

可以实现一个功能或者一个模块的样式在一个文件中编写，这样多人合作，或者维护起来比较省心。此外，你提到的可读性，也就是为什么推荐最多3层嵌套。如果超出3层的话，就要重新考虑了。

这个道理，同样适用于其他预处理器。

2.问题2就是需要soutcemap来解决

Answer 4

你用sass加postcss 可以方便点 目前没啥办法