谈Less语言的优缺点
谈Less语言的优缺点
优点:
- 结构清晰,便于扩展。对于模块很多的应用特别是单页 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。 - 可以方便地屏蔽浏览器私有语法差异。这个不用多说,封装对浏览器语法差异的重复处理,减少无意义的机械劳动。
- 可以轻松实现多重继承。
.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 来作继承在编译后都无需生成无用的父类样式代码。 - 完全兼容 CSS 代码,可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展,所以老的 CSS 代码也可以与 LESS 代码一同编译。
1、须要编译。无论是放在客户端还是服务器端,都是一种额外的花销。
- 作者:顾轶灵
链接:https://www.zhihu.com/question/20259365/answer/14520148