less 引入less

转载

doscommand 2024-10-22 10:03:18

今日目标：

1：今天的学习内容是在工作完成的情况下，学习Less（之所以学习Less是因为项目中使用的是Less）-------------当前进度(0%)

注意项：

注意，由于变量只能定义一次，其本质就是“常量”。

今日成果：

随便说点实际开发中的体会吧。
优点：

结构清晰，便于扩展。对于模块很多的应用特别是单页 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 代码一同编译。

缺点：