Less将CSS赋予了动态语言的特性，如变量、继承、运算、函数等，LESS 既可以在 客户端上运行 (支持IE 6+, Webkit, Firefox)，也可以 借助Node.js或者Rhino在服务端运行。Less颠覆了原来传统的CSS编写方式，大大的提高了开发效率，开发时将代码编写到后缀名为less的文件中，开发完毕后，需要将less 编译为css文件再引入到网页中。今天华清远见CSS开发技术频道就为大家分享一篇CSS开发中less的三种编译方式。

开发环境下的less动态解析

在引入less.js前先要把less样式文件引入，样式可以在网页被访问时动态解析出来，无需每次都编译。
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

要使用它，只要在URL后面加上 #!watch，然后刷新页面就 可以了

利用hbuilder自动编译

在hbuilder工具中，修改less文件内容后保存，会自动将less编译成同名的css文件。

•hbuilder的less解析插件依赖于node.js编译环境，所以 我们要先在操作系统中安装node.js。否则会报错(如下图)

hbuilder无法自动编译less文件的处理方法

检查一下less插件有没有安装，依次找到工具->插件安装，如果显示已安装就表示less插件已经安装好了，如果没安装， 就勾选上安装一下即可

hbuilder无法自动编译less文件的处理方法

依次找到工具->预编译器设置，选择.less，然后点击编辑。

hbuilder无法自动编译less文件的处理方法

1.触发命令地址里填less的编译脚本lessc.cmd地址，在你hbuilder软件文件夹中搜索 lessc.cmd，就能找到这个文件了，在上面右键->属性就 能找到他的具体地址。例如我的路径是：D:\绿色软件

\HBuilder\plugins\com.pandora.nodejs.thrift_1.0.0.20160908171 8\js\node_modules\.bin\lessc.cmd

2.命令参数里写 %FileName% %FileBaseName%.css

3.点击确定后，再去编写less文件，就能自动编译成css文件了。

koala预编译软件

koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。 跨平台运行，完美兼容windows、linux、mac。

l 官网：koala-app.com/index-zh.html

koala使用方法

1.打开软件后将less文件所在文件夹拖拽到koala软件中。在右侧会列出所有less文件

2.在需要自动编译的less文件上 右键->设置输出路径

3.在文件名中写上编译后生成的css的文件名即可。