如何用sublime更高效的编写less

[stuxt]

如何用sublime更高效的编写less

小天同学 2016-02-15

写在前面的话

随着前端最近的发展和行业的重要性的提升，前端技术也在飞速的发展，涌现出各种各样的前端语言和前端工具及框架等。为了紧跟大部队的步伐，提高生产力，所以最近在学习less这个火热的css预处理器。做事必先利其器，所以这里就是一个入门的利器介绍，大神勿喷！这个主要适合刚接触less的同学参考。

less简介

less一种 动态 样式 语言.
less将 CSS 赋予了动态语言的特性，如 变量， 继承，运算， 函数. less既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。

基本环境介绍

Windows PC
Sublime text 3 编辑器
NodeJs
Npm 包管理器

不是所有的前端工程师都在用高大上的Apple，还有很多像我们这样的苦逼前端，依然用windows奋斗在第一线。好了，扯远了。
其实less不像sass那样需要ruby这种语言作为依赖，这也是我选择less的原因中的其中之一。Less可以在客户端使用，也可以在服务器端使用，所以用起来还是很方便的。你只需要有一台windows的pc电脑，安装了sublime，nodejs和npm等。Sublime中有很好用的插件less2css，可以在你保存.less文件的时候自动生成.css文件。这也算是一个less初学者的利器了。当然如果你用了gulp、grunt等工具的话，就不用往下看了。

基本步骤

下面就具体介绍一下如何更好的用sublime开发less。
第一、 首先你要安装lessc。我是用npm包管理器直接安装的，只需要一条命令，如下：
npm install less -g
当然这个是安装在你的电脑的全局目录下的，你也可以安装在你需要的项目目录中，具体请自行百度。
你可以用如下命令看下你的lessc是不是安装成功了：
$ lessc -v
第二、 当然如果你希望编译生成的css为压缩的css文件的话，你还需要安装一个less的插件less-plugin-clean-css，注意这个插件要和lessc安装在同一个目录下。当然安装也是很简单的，只要下面这行命令就搞定了：
npm install less-plugin-clean-css -g
第三、 Less2css的依赖环境安装完毕，现在转战sublime安装插件。打开sublime之后ctrl+shift+p>install Package搜索Less2css按Enter就可以了。
第四、 完成，你可以写一个test.less来保存测试一下效果了。保存后你会发现在同目录下有一个test.css文件。
第五、 之后，你可以从Preferences > Package Settings > Less2CSS > User
设置less2css不开启压缩，配置如下：
{ "minify": false }
第六、 Sublime是不支持less代码高亮的，这里我们也可以同样的方法安装less插件，来实现less代码的高亮显示。

Ok，你可以愉快的编写less了！祝你工作愉快~

现在后面的话

我们这里lessc的安装介绍的是基于nodejs和npm的命令行来安装的，你也可以直接去下载less.js-windows放到本地，然后手动配置path，同样可以，百度一大堆，这里就不介绍了。让我们共同进步吧！

[stuxt]

• 插件github地址
• 参考链接

[stuxt]

less高亮插件github地址

[devilmanjquery]

good，这比百度上一大堆方法却不写注释表达的意思清楚多了

[stuxt]

@devilmanjquery 当时我也是深受其害，所以就自己把自己探索使用的过程系统详细的整理了一下。希望对大家有帮助。