分享15款很实用的 Sass 和 Compass 工具

  Sass 是 CSS 的扩展,增加了嵌套规则,变量,混入功能等很多更多。它简化了组织和维护 CSS 代码的成本。Compass 是一个开源的 CSS 框架,使得使用 CSS3 和流行的设计模式比以往任何时候都更容易。

  在这篇文章中,我们已经收集了一组有用的 Sass 和 Compass 工具,将帮助您快速构建 Web 应用程序。

您可能感兴趣的相关文章

1. Compass.app


Compass is a stylesheet authoring framework that makes your stylesheets and markup easier to build and maintain. With compass, you write your stylesheets in Sass instead of plain CSS. Compass.app is a menubar only app for Sass and Compass. It helps designers compile stylesheets easily without resorting to command line interface. Compass.app is written in Java (JRuby), and works in mac, linux and pc. You do not need to install Ruby environment to use it.

2. Scout


Scout is a cross-platform app that runs Sass and Compass in a self-contained Ruby environment, Scout runs Sass and Compass in a self-contained Ruby environment, letting you effortlessly manage all of your Sass projects with a handful of clicks. You’ll never have to worry about your Ruby setup or deal with technical issues. Scout does all of the heavy lifting, giving you more time to do what you love.

3. Codekit


Codekit is a powerful compiler that processes Sass, Compass, Less, Stylus, Jade, Haml, Slim, CoffeeScript and Javascript files automatically each time you save. With live browser reloads, image optimization and easy debugging, it makes working with Compass and Sass a breeze. The app also offers team collaboration and helps reduce load times by combining and minifying files.

4. Archetype


Archteype is a Compass/Sass framework for creating configurable, composable UI patterns and components. It’s well documented and uses a natural language syntax.

5. Susy


Susy provides responsive grids for Compass, filling the void left when grids were stripped from Compass. You can quickly add media-query breakpoints for new layouts, or create your own math using Susy’s array of grid helpers. It has the power to help you build a site in minutes, or create a scalable grid library for use in large projects.

6. The Saasway


The Sass Way covers the latest news and topics on crafting CSS using Sass and Compass, with articles, resources and tutorials to suit both beginners and advanced users.

7. Sassaparilla


Sassaparilla makes starting responsive web projects faster using Sass and Compass. It focuses heavily on better typography with exceptional vertical rhythm, and lets you work in px while compiling in ems, eliminating a lot of math designers often need to do. It supports variables using Sass for things like color.

8. LivingStyleGuide


The LivingStyleGuide Gem is an easy way to create front-end style guides using Sass and Compass. Just add Markdown to your Sass to create your guides.

9. Pondasee


Pondasee has been made to help front-end designers accelerate their work-flow for making web applications. It is NOT a CSS framework, it is a front-end starter kit combined with the power of SCSS & Compass to help build a template.

10. LiveReload


LiveReload resides in your menu bar and monitors changes in the file system. As soon as you save a file, it is preprocessed as required, and the browser is refreshed. It ships with SASS, Compass, LESS, Stylus, CoffeeScript, IcedCoffeeScript, Eco, SLIM, HAML and Jade, and is controlled by two main checkboxes, so you won’t get lost.

11. Koala


Koala is a GUI app for CoffeeScript, Compass, Less, and Sass compilation, to make you a more efficient web developer. It runs on Mac, Linux, and Windows, and includes real-time compilation, multi-language support, and more.

12. Bootstrap Sass


Bootstrap-Sass is a Sass-based version of Bootstrap, perfect for your Sass-powered applications. It can be installed with Rails, Compass, or Sass-only.

13. Forge


Forge is a free command-line toolkit for bootstrapping and developing WordPressthemes in a tidy environment using front-end languages like Sass, LESS, and CoffeeScript. Forge creates a neatly organized source folder with clean and simple scaffolding (base template files, SCSS files, and theme options). The source folder is automatically compiled to your local WordPress install(s) as you save changes and work on your theme.

14. Prepros


Prepros is an app dedicated to making compiling code easier. It compiles all of your Sass, Scss, Compass, Less, Jade, Haml and CoffeeScript in real time, with live browser refresh to keep your preprocessing workflow seamless. It has no dependencies and features a built-in HTTP server, background file watch, error notification and live CSS injection.

15. Break Point


Breakpoint makes writing media queries in Sass super simple — just create a variable using a simplified syntax, based on most commonly used media queries, then call it using the “breakpoint” mixin. Breakpoint handles all of the heavy lifting, from writing the media query itself to handling cross-browser compatibility issues.

您可能感兴趣的相关文章

本文链接:分享15款很实用的 Sass 和 Compass 工具

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

时间: 2024-10-10 21:22:33

分享15款很实用的 Sass 和 Compass 工具的相关文章

15款很棒的 JavaScript 开发工具

在开发中,借助得力的工具可以事半功倍.今天,我爱互联网向大家分享最新收集的15款非常有用的 javascript 开发工具. TestSwarm: Continious & Distributed JS Testing TestSwarm是Mozilla实验室推出的一个开源项目,它旨在为开发者提供在多个浏览器版本上快速轻松测试自己javascript代码的方法. Minimee在网络上,速度是很重要的,Minimee能帮助你将css和javascript文件进行自动压缩和打包. Doctor J

一款很不错的html转xml工具-Html Agility Pack 实现html转Xml

[转]一款很不错的html转xml工具-Html Agility Pack 之前发个一篇关于实现html转成xml的劣作<实现html转Xml>,受到不少网友的关心.该实现方法是借助htmlparser去分解html内容,然后按照dom的结构逐个生成xml字符串.在没有充分实践后,还以为该方案能解决问题.然而经过实际使用,效率确实很低,而且对一些特殊html属性的转换也不支持,得到的结果差强人意. 偶然一次机会在浏览codeplex网站时,发现一款很不错的html解析以及转换工具,就是本篇标题

15款免费WiFi入侵破解安全测试工具

以下是的15款免费(接近免费)的WiFi网络入侵测试工具.这些工具将帮你发现流氓AP,弱Wi-Fi密码等安全隐患,在黑客光临之前把漏洞补上. 一.Vistumbler扫描器 Kismet是一个开源的WiFi扫描器,包嗅探器和入侵政策系统,可以在windows.Mac OSX.Linux和BSD上运行.Kismet能显示AP详细信息,包括隐藏的SSID,还能捕获原始无线数据包,还可以将数据导入Wireshark.TCPdump等工具进行分析.在windows环境,受驱动程序限制,Kismet只能与

一款很不错的html转xml工具-Html Agility Pack

之前发个一篇关于实现html转成xml的劣作<实现html转Xml>,受到不少网友的关心.该实现方法是借助htmlparser去分解html内容,然后按照dom的结构逐个生成xml字符串.在没有充分实践后,还以为该方案能解决问题.然而经过实际使用,效率确实很低,而且对一些特殊html属性的转换也不支持,得到的结果差强人意. 偶然一次机会在浏览codeplex网站时,发现一款很不错的html解析以及转换工具,就是本篇标题所提到的Html Agility Pack.Html Agility Pac

推荐 15 款很棒的文本编辑器

本文中提及的文本编辑器软件,并非全部开源,仅供参考. 1. Notepad++: 这是 Windows 记事本一个最好的替换产品,主要特点包括: a. 自动完成b. 语法高亮c. 拖放特性d. 搜索e. 缩放 2. PSPad: PSPad 是一个Windows平台上免费的适合程序员使用的编辑器.它可以让你保持上一次编辑状态,这样在你下次打开编辑器的时候可以直接显示原来的文件.此外它还支持通过FTP进行远程编辑,支持多文件的比较等. a. 语法高亮b. 支持多文档编辑c. 内建 FTP 客户端d

一款很实用的欠压过压保护电路

引用:http://bbs.21dianyuan.com/thread-65151-1-1.html 1.过压保护电路 欠压电路分析:         V2点电压 如图1所示,电路中的参数所示: 当V2=V3是,比较器输出改变 令V2=V3是得到: 因此得到: 当VB<10.6447        V3>V2  比较器输出高电平: 例如:VB=10V  (V3=0.9677)>(V2=10/11=0.907V)  输出高电平 当10.6447<VB<14.63   V3<

一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content=&

一款很实用的 字母条索引+自定义进度条

代码下载地址 点击打开链接 自己之前写过几个联系人索引条的小demo,但没有在项目中自己体验过,最近项目中有用到,这个功能模块是同事写的,今天抽空摘出来下,以保存,将来可以用到 接下来就一步步简单的说下思路吧:action开始 首先先看下主界面的布局文件吧 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.andro

15款优秀移动APP产品原型设计工具

一款优秀的移动APP产品原型设计工具应该具备: ①.支持移动端演示(随时随地演示给BOSS,厕所&食堂&电梯-以体现我是那么的敬业--长点工资必备) ②.组件库(高效复用,谁用谁知道) ③.可以快速生成全局流程(程序猿看不懂拆解的,给丫的看这个) ④.在线协作(多个PM狗一起用) ⑤.手势操作.转场动画.交互特效-(这些都不需要,留给专业的交互.视觉,搞那么虚的不如多想想产品流程逻辑做做减法.写写xxRD啥的) 这些年,产品狗们折腾过的原型工具: 1. POP(Prototyping on