动态样式语言——less运行环境的搭建及使用

由于CSS的维护和扩展工作艰巨。“动态样式语言”（如 less）在CSS的基础之上，添加了一些标准的“语言”所必须的内容：类型、变量、运算、函数、循环选择、继承等。
但是浏览器默认只支持静态样式语言，所以所有的动态样式首先必须“编译”为静态样式才可以实现渲染页面的功能！
所以 .less 文件必须用工具软件(lessc)，转化为静态样式(CSS)，才能被浏览器所使用。下面是两种转化方法：

在客户端使用LESS——不推荐使用

这种方式的使用方式比较简单，只需要在HTML页面引入两个文件就可以了，分别是：1. 自己写的 *.less文件 、2. 网上下载的 lessc.js 文件。
一定要先引入less文件再引入js文件；客户端浏览器解析时会下载这两个文件，使用lessc.js把.less转化为css内容再渲染页面。
这就是不推荐在客户端使用less的原因，首先会影响页面加载的速度，浏览器要下载额外的lessc.js文件，还要将 .less 文件编译成 .css 文件。这两个多出来的步骤显然会影响性能；其次，如果在加载js文件的过程中网络出现问题、或者编译less文件时出错，页面就完全没有样式了。

在服务器端使用LESS

这种方式是将编写的less文件，使用一个脚本工具(lessc)，在服务器端执行一次编译操作，把.less文件 转化为 .css文件。然后在 .html文件中引入.css文件即可。实现编译操作需要几个步骤：
1、需要下载并安装一款服务器端JS解释器： NodeJS
在网上找 node-v0.12.1-x86.msi(32位) 或 node-v0.12.4-x64.msi(64位) 安装包下载后 傻瓜式安装就可以了。安装完成后在命令行中输入node 或 node.exe出现下面的界面就表示安装成功了，如果不行就配一下环境变量的path。

2、下载LESS源文件的转换工具： lessc.js，可以直接上网找npm文件使用，然后放在没有中文和空格的目录下，我这里放在C盘根目录下了。转换工具在这里：C:\npm\node_modules\less\bin\lessc（省略了js后缀）

3、使用服务器端JS解释器执行LESS转换工具，有两种执行方式：
1)在命令行执行——使用不便、不推荐
在命令行输入node 转换工具路径 less文件路径 > 编译后css文件的存放位置就可以了。如：node C:\npm\node_modules\less\bin\lessc E:\1.less > E:\1.css
但是这种方式每次改完less文件都得重新编译，使用不方便，所以不推荐。

2)使用工具编译less文件——推荐
我这里用的是WebStorm(WS)中的文件监视器，这样在写创建或修改（less文件）的同时编辑器就自动帮着即时编译为css文件了，并存储在less文件同一目录下，但每个新项目在使用前都需要先帮WS配置一下：
依次点击：File -> Tools -> File Watcher -> 右上加号 -> Program，然后浏览选择lessc文件所在目录(我这里就是C:\npm\lessc.cmd)，点OK，重启WS，完成。

现在可以尽情的写less语言了，写完将最后生成的css文件引入html文件中就可以了。
less语言是一个动态样式语言，有变量、混入、嵌套、继承、运算、函数、导入等语法，还可以用它来给bootstrap定制样式（bootstrap就是用这个语言开发的），非常好用。这里有几个学习less语言的中文网站可供参考学习：

中文文档：http://less.bootcss.com/
bootstrap中提供的中文文档：http://www.bootcss.com/p/lesscss/