less是前端开发CSS的神器,但如何让less代码语法高亮,智能提示,快速编译及格式化,这不是一般的IDE的less插件能做到。下面是我搜刮到的一些工具

Codekit - incident57又一华丽丽的工具,目前是beta,官网上介绍中罗列了这些功能特性:

自动编译Less, Sass, Stylus, CoffeeScript, Jade & Haml等文件

致力于js文件合并和压缩,以及js语法错误检查

同时还支持Compass(Sass伴侣,官网地址:compass-style.org)

令人发指的是甚至还能对jpeg&png图片优化

自动刷新浏览器(之前推荐过同类的工具:前端开发利器-F5)

让你在不同的项目中仅维护同一套文档

然而这还仅仅是其中的一部分...

相信对于Web前端攻城师来说,这些功能都是非常受用的

但是....

> 该软件只能跟Mac合体(Mac OS 10.7+)

> 收费的...当然这么好的软件还是值得购买的

想了解更多请移步官方网站吧 : http://incident57.com/codekit/

既然提到了工具,就顺带再推荐一些相关的工具供大家使用吧,涵盖Mac,Linux,Windows平台 :

LESS.app (free,for mac)

同样出自incident57早期的一个 工具,Codekit是它的升级版

WinLess   (free,for win)

WinLess是Windows下LESS.js的GUI工具,对于Windows下的web developer来说是居家必备的神物...

SimpleLESS (free for mac, linux and pc)

同样是华丽得一塌糊涂,貌似跟mac搭上边的软件都有这么一个特性-, -

Crunch (基于air,所以跨平台)

特点:

Crunch不仅仅是一款LESS编译器,同时也是LESS编辑器.

如果你工作中跟大量的LESS文件打交道试下它准没错.

Crunch是基于Adobe AIR平台.

SASS相关的GUI推荐:

compass.app ($7  Windows/Linux/Mac)

支持Windows/Linux/Mac
支持LiveReload
内置Web server
支持Compass扩展

参考:

http://sass-lang.com/ (很久前打算翻译官方的文档,貌似在草稿箱存了挺长时间一直木有完成它,找时间整理一下)

http://www.lesscss.org (由于官网在墙外,taobao ued飞长童靴发起了LESS中文站以及LESS在线工具 以及各种工具汇集)

https://github.com/cloudhead/less.js/wiki/GUI-compilers-that-use-LESS.js (同时也推荐了几款命令行工具)

http://winless.org/

http://compass.handlino.com/

http://compass.handlino.com/

各种less开发工具的更多相关文章

  1. 【Machine Learning】Python开发工具:Anaconda+Sublime

    Python开发工具:Anaconda+Sublime 作者:白宁超 2016年12月23日21:24:51 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现 ...

  2. XCodeGhost表明:为了安全,开发工具应该从官方网站下载

    今天的热门话题就是XCode编译器,这个神器在火热的移动互联网浪潮下也被人利用了,据文章分析 (XCode编译器里有鬼 - XCodeGhost样本分析)http://www.huochai.mobi ...

  3. 微信小程序开发工具测评

    1月9日微信小程序正式上线.很多企业都希望能在这个.但是在技术开发的问题上,却不知道该如何下手.经过一些程序员不辞辛苦连夜测试,终于从十余款工具呕心沥血筛选出四款比较靠谱实用的微信小程序开发工具.接下 ...

  4. Python 环境搭建,开发工具,基本语法

    python环境 https://www.python.org/downloads/ 现在pthon有两个版本 一个是3.5系列的 , 一个是2.7系列的.建议用3.5版本的 开发工具 PyCharm ...

  5. Chrome 开发工具之Timeline

    之前有说到Element,Console,Sources大多运用于debug,Network可用于debug和查看性能,今天的主角Timeline更多的是用在性能优化方面,它的作用就是记录与分析应用程 ...

  6. Chrome 开发工具之Sources

    Sources面板主要用于查看web站点的资源列表及javascript代码的debug 熟悉面板 了解完面板之后,下面来试试这些功能都是如何使用的. 文件列表 展示当前页面内所引用资源的列表,和平常 ...

  7. Chrome 开发工具之Elements

    友情提示:全文图片高能,如使用手机阅读,请确保在wifi情况下或者流量充足.图片有点渣,也算辛苦做出来的,请别嫌弃- Elements面板主要展示当前页面的组织结构,在如今的应用程序中,HTML页面初 ...

  8. Chrome 开发工具之Console

    前段时间看git的相关,记的笔记也大致写到了博客上,还有些因为运用不熟,或者还有一些疑惑点,暂时也不做过多纠缠,之后在实践中多运用得出结论再整理分享吧. 工欲善其事,必先利其器.要想做好前端的工作,也 ...

  9. Android 常用开发工具以及Mac常用软件

    Android 常用的开发工具记录.其中包括AndroidStudio(IDEA)插件.Mac 上好用的软件以及国内知名Android开发者博客等. Android Studio 插件 codota ...

  10. 微信小程序开发工具的数据,配置,日志等目录在哪儿? 怎么找?

    原文地址:http://www.wxapp-union.com/portal.php?mod=view&aid=359 本文由本站halfyawn原创:感谢原创者:如有疑问,请在评论内回复   ...

随机推荐

  1. C#分页类

    using System.Linq; using System.Collections.Generic; namespace CommonLibrary { public class PagedLis ...

  2. laravel创建新model数据的两种方法

    laravel中的CRUD操作中,通过对代表数据表中row的model对象操作,来更新数据库表. 对于创建新的row的操作,有两种功能上相同的方法: 1.create: $user = User::c ...

  3. 相对定位、绝对定位在IE6的问题

    注意: 关于绝对定位,在IE6下定位元素的父级宽高都为奇数那么在IE6下定位元素的right,bottom都有一像素的偏差(left,top无偏差).因此应尽量使用偶数. 关于绝对定位,在IE6下父级 ...

  4. linux安全体系

    一.   硬件.软件选型 确认需求,分析可能面临的安全问题 记录各硬件寿命.保证散热.确保性能冗余 使用商业正版.开源的软件,不从互联网安装系统,从源头保证系统安全 购买专业售后支持 服务器配置双电源 ...

  5. BZOJ 2151 种树

    贪心+priority_queue. #include<iostream> #include<cstdio> #include<cstring> #include& ...

  6. 深入理解ob_flush/flush

    ob_flush/flush在手册中的描述, 都是刷新输出缓冲区, 并且还需要配套使用, 所以会导致很多人迷惑… 其实, 他们俩的操作对象不同, 有些情况下, flush根本不做什么事情.. ob_* ...

  7. MySQL基础之第18章 性能优化

    18.1.优化简介 SHOW STATUS LIKE ‘value’;connections                 连接数uptime                          启动 ...

  8. 对话框式Activity的设置

    <activity android:name=".OtherActivity" android:label="@string/app_name" andr ...

  9. 百度地图Api详解之地图标注

    标注概述 标注(Marker)是用来表示一个点位置的可见元素,每个标注自身都包含地理信息.比如你在西单商场位置添加了一个标注,不论地图移动.缩放,标注都会跟随一起移动,保证其始终指向正确的地理位置. ...

  10. 解决WebSphere异常:SRVE0199E: 已获取了 OutputStream

    dlg: 例如 在WebSphere这个目录下 /opt/IBM/WebSphere/AppServer/profiles/AppSrv01/temp/master1Node01/master1/gk ...