less/sass/stylus开发工具汇总

less、sass、stylus已经火起来了，越来越多的人开始使用这三个工具了，而且貌似使用less的人比较多一些~~而我们也有很多相关的开发和调试工具可以让我们的开发流程更简单快捷一些~~

sublimetext

相信用sublime text 2作为主要编辑器的前端开发同学已经很多了，sublime text上面的相关插件也不少，这里无需多说，ctrl+shift+p –> install package可以搜索到相关的插件，不过，这里也简单的汇总下：

• less sublime
• less build sublime
• less2css
• less snippets
• sublime text haml sass
• sass-build-sublimetext2
• stylus
• emmet——集成了less、sass、scss等，使用tab或者ctrl+e即可。

chrome

最新版的chrome开发者工具已经可以支持sass了，点击开发者工具右下角的的设置按钮，切换到experiments tab，即可开启：

但是好期待也能够默认支持less啊！！！

当然也有很多第三方插件可以用：

• sass inspector
• sass sleuth

好吧，chrome下貌似没有好用的less、stylus插件。

firefox

• fireless
• firesass for firebug
• firestylus for firebug

cssgaga 支持 less

最新版的cssgaga开始支持自动处理less文件了。

嗯，神飞暂时就只收集到了这么多，有更多好用的插件或者工具欢迎反馈~~

作者: 神飞
爱好前端设计与开发，崇尚一目了然的设计。现居深圳，就职于腾讯isux团队 follow me on twitter @qianduan。

5 个评论

• 

  yuyi 发表于feb 7, 2013 at 16:49

  stylus 的话 stylus这个命令行工具本身就是很好的工具～

  firestylus就是基于 stylus -f的 还有 stylus -i 可以测试stlyus表达式 stylus -c 可以转换css成stylus -d可以对比输入输出结果。

  `stylus help xx` 可以直接在mdn里头搜索xx这个词 ～

  回复
• 

  ipoly 发表于feb 7, 2013 at 17:04

  codekit呢？

  回复
• 

  fengdi 发表于feb 21, 2013 at 00:57

  sublimetext lessc插件
  https://github.com/fengdi/lessc

  回复
• 

  李俊杰 发表于mar 17, 2013 at 00:15

  hi, 请问下文章中所说的 【emmet——集成了less、sass、scss等，使用tab或者ctrl+e即可。】
  这个在sublime text 2 中怎么使用？
  是在.less 文件中写好less格式的css 按tab?
  还是怎么？

  回复
• 

  ehtan 发表于apr 18, 2013 at 13:06

  试试koala吧，新工具，支持less、sass、coffeescript。
  http://koala-app.com/index-zh.html

  回复