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

性情肛裂
  • 45

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

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

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

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

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

回复
阅读 4.1k
4 个回答
golden_freeman_china
  • 1.8k
✓ 已被采纳

[更新]

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

KevinYue
  • 5.3k

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

图片描述

billwong
  • 920

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

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

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

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

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

宣传栏