今日目标:

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的使用

LESS的好处的更多相关文章

  1. 使用Maven私服的好处

    1.Maven仓库的分类 本地仓库:当Maven执行编译或测试时,如果需要使用到依赖文件,它总是基于坐标使用本地仓库的依赖文件.默认情况下,不管Linux还是Windows,每个用户在自己的用户目录下 ...

  2. [C]指针有什么好处?

    指针的好处,需要和数组比较起来说.具体如下:     1.指针可以随意申请不连续的数据存储空间,而数组是连续的,如果数组空间没有全部占用,那么会造成浪费,比如你申请了a[10],缺只有5个数据输入,那 ...

  3. 单页web应用是什么?它又会给传统网站带来哪些好处?

    文章来源:<单页Web应用:JavaScript从前端到后端> 什么是单页应用? 单页应用是指在浏览器中运行的应用,它们在使用期间不会重新加载页面.像所有的应用一样,它旨在帮助用户完成任务 ...

  4. java封装好处和原则

    /*封装好处 隐藏实际细节,提供公共的访问方式 提高了代码的复用性 提高安全性 封装原则 将不需要对外提供的内容都隐藏起来 把属性隐藏,提供公共方法对其访问.*/

  5. Jquery和其他库($的好处)

    ---很多时候我们的页面 会使用很多的 javascript库 ---而这个时候  jQuery这款重点在满足社区用户的需求的工具  做好了让jQuery在页面上与其他库和平共处的准备 凭借名副其实的 ...

  6. [IOS 开发] 懒加载 (延迟加载) 的基本方式,好处,代码示例

    懒加载的好处: 1> 不必将创建对象的代码全部写在viewDidLoad方法中,代码的可读性更强 2> 每个属性的getter方法中分别负责各自的实例化处理,代码彼此之间的独立性强,松耦合 ...

  7. 【转】GPU 与CPU的作用协调,工作流程、GPU整合到CPU得好处

    在不少人的心目中,显卡最大的用途可能就只有两点--玩游戏.看电影,除此之外,GPU并没有其他的作用了.但是随着微软IE9的正式发布,不少人突然发现,微软一直提到一个名词:GPU硬件加速,从而也让不少人 ...

  8. [专业名词·硬件] 1、等效串联电阻ESR概述及稳压电路中带有一定量ESR电容的好处

        一.等效串联电阻ESR概述 ESR是Equivalent Series Resistance的缩写,即“等效串联电阻”.理想的电容自身不会有任何能量损失,但实际上,因为制造电容的材料有电阻,电 ...

  9. SQL Server配置管理器的“别名”功能好处,实现内外网统一以及加了端口号导致的限制

    这里主要有两个别名,经过研究,最好两个都配置成一样的,减少排查. 操作: 点击[别名],右键[新建别名] 这里的别名能实现比如我一台远程服务器,加了端口的,如果要实现在SQL登录的时候,使用计算机名来 ...

  10. C++ do{...}while(0)的好处

    在开源软件里面经常可以看到这样的写法. #define X(a) do { f1(a); f2(a); } while(0) 1. 主要作用是放在宏定义里面,避免宏带来的语法问题. 比如 #defin ...

随机推荐

  1. struts2实现ajax校验的2种方法

    共同的一点是,Action都需要将一个方法暴露出来,给前端javascript调用  javascript的代码都是一样的: Js代码   function testAjax() { var $use ...

  2. React 深入系列5:事件处理

    文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列5:事件处理 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加 ...

  3. angularjs作用域之transclude

    transclude是一个可选的参数.如果设置了,其值必须为true,它的默认值是false.嵌入有时被认为是一个高级主题,但某些情况下它与我们刚刚学习过的作用域之间会有非常好的配合.使用嵌入也会很好 ...

  4. Spring Cloud 入门教程 - 搭建配置中心服务

    简介 Spring Cloud 提供了一个部署微服务的平台,包括了微服务中常见的组件:配置中心服务, API网关,断路器,服务注册与发现,分布式追溯,OAuth2,消费者驱动合约等.我们不必先知道每个 ...

  5. Python中导入第三方声源库Acoular的逻辑解释以及Acoular的下载

    [声明]欢迎转载,但请保留文章原始出处→_→ 秦学苦练:http://www.cnblogs.com/Qinstudy/ 文章来源:http://www.cnblogs.com/Qinstudy/p/ ...

  6. DB2常用命令2

    1.启动实例(db2inst1):实例相当于informix中的服务 db2start 2.停止实例(db2inst1): db2stop 3.列出所有实例(db2inst1) db2ilist 4. ...

  7. javascript学习(三)——常用方法(2)

    一.兼容性较高的浏览器页面关闭 //关闭网页,不支持火狐(火狐返回上次浏览页面)   //FireFox非window.open()等弹出页面,需要在地址栏中输入about:config, 然后将do ...

  8. JDBC基本使用

    J2EE技术规范(二)——JDBC 分类: java2012-12-03 14:25 1060人阅读 评论(8) 收藏 举报 一.了解JDBC (1) JDBC是以统一方式访问数据库的API (2) ...

  9. Codeforces Round #479 (Div. 3) C. Less or Equal

    题目地址:http://codeforces.com/contest/977/problem/C 题解:给一串数组,是否找到一个数x,找到k个数字<=x,找到输出x,不能输出-1.例如第二组,要 ...

  10. C#避免踩坑之如何添加paint事件

    看截图: 首先,右击->属性 然后出来这个界面. 接下来,注意看这个界面的上面:鼠标悬停这个闪电符号,看到没,事件!! 那个闪电符号,点它! 然后下拉找到这个: 你要事先在代码里面添加Form1 ...