HTML5学堂-码匠 HTML5学堂

您当前位于:工具类文件推荐 ——> 快速开发CSS的利器 - less系列 注释、转义与总结

快速开发CSS的利器 - less系列 注释、转义与总结

2015/05/09 16:08:52 | 作者:HTML5学堂(码匠) | 分类:工具类文件推荐 | 关键词:快速开发,less

快速开发CSS的利器 - less 注释、转义与总结

HTML5学堂:在之前的5篇文章当中,我们已经讲解了less的基本用法,今天作为一个收尾,针对less的其他小知识进行一些讲解。并且总结一下之前几篇less的核心概念。不多说了,一起来看今天的内容。

less注释

在less当中,允许有两种注释书写的方法,标准的CSS注释——/*注释内容*/,以及类似于JS的单行注释——//注释内容。两种注释的区别在于,使用标准的CSS注释,不仅能够使用,也能够最终正确输出(渲染后的CSS文件当中也包含当前注释)。如果使用的是但行注释,则不能够被输出。

less转义

在代码的书写过程当中,有可能会出现一个CSS中正常但是less无法中无法识别的值。这种样式通常是IE的一些hack操作,因此此时我们需要使用转义字符。

demo

  1. .alp {
  2.     filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
  3. }
  4. /* 实际渲染后的CSS样式 */
  5. .alp {
  6.     filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);
  7. }

欢迎沟通交流~HTML5学堂

less文件编译成CSS

在进行代码编写时,我们可以使用less提高代码的编写速度。但是,如果我们直接让网页加载less文件,那么需要引入less.js文件,增加了服务器请求次数,也增大的流量(下载less.js),同时css还需要在下载后进行解析。为了最后保持css的引入状态。有两种方法,一种是利用node.js以及gavin在服务器端实现less文件的解析(这个方法我们这里暂不谈),另一种方法则是,在使用less完成代码编译之后,再使用软件进行less——>css的编译。

我们实现这个功能的时候可以使用一个名叫koala的软件。软件下载地址:http://koala-app.com/index-zh.html。安装、打开软件之后,将正在开发的整个项目文件夹拉到软件提示添加的区域内,此时软件会拿到项目中的所有less文件,通过refresh刷新操作,即能看到less文件下,会生成对应的css文件。

less总结

到今天为止,也算是把less的基本知识出了一个系列了~在此整理一下less的知识吧——使用less的目的在于,能够提升我们编写CSS时的速度。对于less的使用,可以通过变量以及参数混入,实现对一些常用值的替换,从而达到更改一次实现多处修改的效果;另外通过CSS的混入,简化CSS中通用样式的书写;通过嵌套的规则和方法,将同一个模块的样式在同一个区域中进行书写,减少来回查阅代码造成的时间耽搁以及规避优先级问题。另外,在less中可以使用运算,更方便代码的编写。对于less要求在服务器环境下运行,如果希望编辑器以及浏览器能够编写或解析less文件,都需要引入插件或者js文件。对于less文件解析为CSS,就是我们今天提到的koala软件啦~~~

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS