less的优缺点

Posted 2020-10-11

优点：

1. 结构清晰，便于扩展。对于模块很多的应用特别是单页 app，经常需要用 selector 来划分不同模块的 CSS 的 scope。如果满眼望去全是 .module .action .list a, .module .action .list a:hover 很难直观地理解样式应用的范围；而写成
   .module {
   　.action {
   　　a, a:hover {
   　　　//styles
   　　}
   　}
   }
   //other modules
   这样要清晰得多。这样可维护性必然会高很多，举个例子：如果要改变样式的应用范围，增加一个适用的 action，只需把 .action 改成 .action, .action2 即可，而纯 CSS 就悲剧了，要修改每个相关 rule set 的 selector。
2. 可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
3. 可以轻松实现多重继承。
   .box {
   　display: block;
   }
   .thick-bordered {
   　border: 5px solid black;
   }
   .notice {
   　.box;
   　.thick-bordered;
   }
   这样无论父类有什么改动子类都会同步更新。有人说这个在 html 中把 class 写成 "notice box thick-bordered" 就好了，但是这样增加了HTML 与样式的耦合，如果模板中有多个 .notice 在修改时就难免做重复劳动，同时除了修改过的 CSS 文件外，客户端缓存的 HTML 模板也需要重新下载。在 LESS 中，如果利用 mixin 来作继承在编译后都无需生成无用的父类样式代码。
4. 完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

缺点：

1. 须要编译。无论是放在客户端还是服务器端，都是一种额外的花销。
2. 作者更新不够活跃，对社区的力量使用不足。作者对 GitHub 上的 pull request 基本置之不理，他解释说是 GitHub 上的通知让他看不过来所以基本都无视了。所以使用中遇到的一些问题可能官方代码得不到及时的更新。