• LESS的好处


    今日目标:

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

     注意项:

    • 务必确保在 less.js 之前加载你的样式表。
    • 如果加载多个 .less 样式表文件,每个文件都会被单独编译。因此,一个文件中所定义的任何变量、mixin 或命名空间都无法在其它文件中访问

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


    今日成果:

    随便说点实际开发中的体会吧。
    优点:
    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 上的通知让他看不过来所以基本都无视了。所以使用中遇到的一些问题可能官方代码得不到及时的更新。



    基本了解了一下Less的使用

  • 相关阅读:
    操作标签的属性和属性值 table表格
    dom基本获取 标签文本操作
    延时器 清除延时器
    倒计时
    电子时钟
    时间戳
    设定时间的方法
    内置对象Date
    对象的基本特点
    终于有人把云计算、大数据和 AI 讲明白了【深度好文】
  • 原文地址:https://www.cnblogs.com/cndotabestdota/p/7124588.html
Copyright © 2020-2023  润新知