sublime中用less实现css预编译
实现css预编译的方式有很多，听说glup很流行而且功能也很强大，但是就目前的工作而言，仅要css预编译和YUIcompress就够了，接下来切入正题
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
Less 可以运行在 Node 或浏览器端。
一、Less环境的安装
1、安装less插件
ctrl+shift+p -> install package -> less 即可安装
功能：LESS高亮插件
简介：用LESS的同学都知道，sublime没有支持less的语法高亮，所以这个插件可以帮上我们
使用：打开.less文件或者设置为less格式
2、安装less2css插件
ctrl+shift+p -> install package -> less2css 即可安装
less2css插件安装好后需要修改系统的环境变量具体功能设置可以修改该插件的setting-user参数，记住是先将setting-default里的参数复制到setting-user中在修改
功能：
当保存less文件的时候自动生成同名的css文件；
当保存less文件的时候提示编译错误信息；
批量编译项目目录下的所有less文件为css文件。
3. 本地cmd窗口
（1）打开后输入npm install less -g 输入完成后回车会自动安装 (一定要加-g)
（2）less安装完成后再输入npm install less-plugin-clean-css -g 同样输入完成后回车会自动安装 (一定要加-g)
使用：重启一下sublime然后创建less文件并保存，你会惊奇的发现css文件已经生成
工具再强大，也得精通其语法才行啊。
语法教程参见LESS
二、Less浏览器端使用举例
1.新建HTML文件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Less</title> <link rel="stylesheet/less" href="style.less" type="text/css"> <!-- 引用Less文件 --> <script src="less.js" type="text/javascript"></script> <!-- 引用Less.js --> </head> <body> <h1>Welcome Hello World</h1> <h3>Hello world!!!!</h3> </body> </html>
2.Less文件
@primarycolor : #FF7F50; @color : #800080; h1{ color: @primarycolor; } h3{ color: @color; }
自动生成的CSS文件：（可以在设置里面设置为是否需要压缩）
h1 { color: #FF7F50; } h3 { color: #800080; }
3. 使用SublimeServer，即可看到效果
需要特别注意的是，由于浏览器端使用时是使用ajax来拉取.less文件，因此直接在本机文件系统打开（即地址是file://开头）或者是有跨域的情况下会拉取不到.less文件，导致样式无法生效。
还有一种情况容易导致样式无法生效，就是部分服务器（以IIS居多）会对未知后缀的文件返回404，导致无法正常读取.less文件。解决方案是在服务器中为.less文件配置MIME值为text/css（具体方法请搜索）。或者还有一种更简单的方法，即是直接将.less文件改名为.css文件即可。
