This article was published 9 years ago, therefore the contents of this post may be out of date.

For those who don’t know what Sass is, it’s an extension of CSS that adds nested rules, variables, mixin functions, and a whole lot more as it eases the burden of organising and maintaining CSS, while also compiling your Sass code to properly formatted CSS and Compass is an open-source CSS framework that makes the use of CSS3 and popular design patterns easier than ever as Compass works exclusively with Sass to help you write cleaner CSS.

So this week roundup we have put together a list of useful Sass and Compass tools that will help you to build dynamic web apps quicker and without causing any hassle and to tell you right now the first one in this list is the Compass app which cost $10 but is really worth it in my option, so lets start.

1. Compass

Compass

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

Scout is a cross-platform app that runs Sass and Compass in a self-contained Ruby environment, as Scout runs Sass and Compass in a self-contained Ruby environment, it’s lets 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

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

4. Sassaparilla

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.

5. Propros

prepros

Prepros is a 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.

6. Koala

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.

7. LiveReload

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.

8. Pondasee

pondasee

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

9. Susy

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.

10. The Sass Way

the-sass-way

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

Share

10 of the Best Sass and Compass Tools