快速开发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学堂