20 Sass and Compass Tools That Every Developer Must Know About

There are a number of reasons behind CSS’s popularity among which simplicity is a defining one. Today, websites and applications are getting more complex, the complexity and size of stylesheets also increases. In this situation, preprocessor like Sass (Syntactically Awesome Style Sheets) unleashes the hidden potential of CSS by giving you the power to create mixins, use variables to store values, add nested rules and do much more.

Sass, created in 2006, features two syntaxes: One is called the original (Indented Syntax) and another one is called SCSS (Sassy CSS). As it is written just like CSS, it is quite easy to convert an existing website to Sass by simply changing the file extension from .css to .scss. On the other side, Compass is a free CSS framework that works exclusively with Sass and helps you write cleaner code.

In this post, we’re covering 20 Sass and Compass tools, which will not only improve the maintainability of your project, but also enhance your Sass knowledge. Let’s have a look at them.

Scout

Scout is a standalone and cross-platform Compass app that delivers more control, organization and optimization to web designers for making their CSS workflow a snap. It lets them run Sass and Compass in a self-contained environment of Ruby, helping them to manage their Sass projects smoothly with a few clicks. It is very helpful for those designers who don’t have the working knowledge of Ruby or want to learn the command line.

Using Scout, you'll never need to know how to use command line tools or worry about the Ruby setup. As Scout will do all the "heavy lifting", so you’ll also never have to deal with any types of technical issues. It'll help you dedicate more time on the things you love by giving the power of Sass and Compass into your hands.

* * *

Compass.app

Compass.app, written in Java (JRuby), is a cross-platform menu bar only app for Sass and Compass. With this app, designers can easily compile stylesheets without using the command line interface. It features a built-in web server and supports LiveReload and Compass extensions. As it is crafted with Java, so there’s no need to install Ruby environment in order to use it.

* * *

Compass Recipes

Compass Recipes provides a great collection of ready to use CSS Recipes, which are made with Compass and Sass, to designers for creating delicious CSS effects. It offers them a wealth of awesome backgrounds, great visual effects, incredible layouts, stylish icons and fonts, image mixins and functions, media query shortcuts and a lot more. As this Compass extension is available as a gem on RubyGems, so it is quite easy to install. Additionally, it's also available to fork on GitHub.

* * *

Bourbon

Bourbon is an easy to use and lightweight library that provides support for Sass mixins designed to be simple and make things easier. It not only contains up-to-date vendor prefixes to make sure graceful degradation for older browsers, but also other functions and add-ons that helps you write CSS faster and build kick ass web stuff. The best thing about this comprehensive library is that you can also use it in your favorite companion apps such as LiveReload, Hammer and Codekit.

* * *

Neat

Neat, developed by Bourbon, is an open source semantic grid framework for Sass and Bourbon. This simple yet powerful framework can handle any type of responsive layout. The main purpose of developing Neat is to promote clean and semantic markup, which depends completely on Sass mixins and doesn’t pollute your HTML with extra wrapping divs and presentation classes.

Neat is designed to stay as lightweight as possible, so it can easily handle the use of most common grid in modern web design. It is quite easy to use, flexible enough to customize and simple enough to get you up in very less time.

* * *

Susy

Susy offers responsive grids for Compass, filling the gap between grids when they were striped from Compass. With the powerful tools provided by Susy, you can easily add media-query breakpoints for new layouts or create your own math using its array of grid helpers. Additionally, it allows you to create a one-off site in minutes and build a scalable grid library that you can use in your large projects. Susy can be used anywhere, from static sites to WordPress, Rails, Django and more.

* * *

Codekit

Codekit is a simple yet powerful compiler that processes Less, Sass, Compass, Slim, Jade, Haml, Stylus, Javascript and CoffeeScript files automatically whenever you save them. With great features like image optimization, live browser reloads, easy debugging and team collaboration, it helps web developers build websites faster using Compass and Sass.

Moreover, it reduces load time by combining CoffeeScript and JavaScript files together and then minifying with Uglify.js. No installation, configuration or mucking around the command line is required to use this app, just run it and start working.

* * *

LiveReload

Living in your menu bar, LiveReload monitors changes in your file system. Each time you save a file, it is preprocessed and the browser is reloaded as required. Even, when you make a change in an image or a CSS file, the browser is updated instantly without refreshing the page.

It ships with popular compilers like SASS, Compass, LESS, HAML, Eco, Jade, SLIM, IcedCoffeeScript, CoffeeScript and Stylus. However, it works with all modern browsers like Firefox, Chrome, Safari and Mobile Safari, but you’re required to enable web sockets to make it work with Opera.

* * *

Hammer

Hammer is considered as a "game changer" in the world of web development. It has built-in support for Sass (with Bourbon), HAML, CoffeeScript & Markdown, and automatically compile them to CSS, HTML & JavaScript. You can also use special Hammer tags for clever file paths, HTML includes, variables and auto reloading the page. Apart from this, Hammer also provides a beautiful menu bar app “Anvil” that runs local Hammer builds and a curated project library “Rock Hammer”.

* * *

Forge

Forge is an open source command-line toolkit for bootstrapping and developing WordPress themes in a simple and neat environment using higher-level languages like LESS, Sass and CoffeeScript. By giving them access to these front-end languages, it helps developers to accelerate their development process.

Forge creates a tidily organized source folder with SCSS files, base template files and theme options. Then it automatically compiles the created source folder to your local WordPress install(s), as you work on your theme and save the changes. When you want to distribute your theme, it will build it to your favorite folder or bundle it into a zip package that is quite easy to install.

* * *

Sassaparilla

Sassaparilla helps developer to start their responsive web design projects faster by combining the powers of Sass and Compass. The main focus of Sassaparilla is on creating better, awesome typography and accurate vertical rhythm with the help of the compass typography module.

Furthermore, it lets you work in pixels and then compile in ems. You can also work with CSS variables; Sassaparilla will keep them all in a single safe place. Whether you’re a novice to Sass and Compass, or expert in them, it is really easy to set-up and gets started. It is also available on GitHub to fork, with an extensive documentation.

* * *

Prepros

Prepros is an amazing app made for web designers & developers to make their compiling process easier. It compiles all of your SCSS, LESS, Jade, Slim, Stylus, Sass, Markdown, Haml, LiveScript and Coffeescript. With great features like live browser refresh, image optimization, multi device testing, JS concatenation, shareable configuration file and one click FTP deployment, it makes your workflow super fast. It also has an integrated static HTTP server through which you can test your stuff with no file URL restrictions.

* * *

MVCSS

MVCSS is a CSS architecture based on Sass, which helps you create predictable and maintainable application style. It is divided into 3 primary sections: Application, Core, and Modules. The Application contains a file, application.sass, which acts as the loader file. The Core has six components: Reset, Settings, Helpers, Base, Content, and Layout.

In the context of MVCSS, Modules refer to any unit of style, which can be found across numerous pages. This small piece of architecture and associated Styleguide/Library mesh your preferred practices and well-documented methods, like SMACSS, BEM and OOCSS, into one place.

* * *

Sassy Buttons

Sassy Buttons is a Compass extension that enables you to create beautiful and cross-browser compatible CSS3 buttons, using just a few lines of Sass. It offers you a set of mixins and customizable defaults through which you can create your own custom buttons. You can choose from three text styles and five different gradient styles. There is also two optional styles that you can add to your buttons to give them a little more character.

* * *

Sassy Modular Scale

Sassy Modular Scale, inspired by and adapted from Modular Scale, is a mixin based on Sass that calculates the incremental values of a modular scale corresponding to a set size and ratio. It consists of functions for many classic designs and musical scale ratios. You can also add your own ratio by setting a variable and passing it to modular scale. It can be installed as a Ruby gem or used as a Compass Extension.

* * *

The Sass Way

The Sass Way covers the hottest topics and latest news on crafting CSS using Sass & Compass, with tutorials, articles and resources which are very useful for all types of users including beginner, intermediate and advanced. It's frequently updated by a team of writers and contributors. You can also send them your Sass news or suggest them what new content they should write about. You can subscribe to them via RSS or follow them on Facebook and Twitter.

* * *

Normalize.css

Normalize.css is a modern and popular HTML5-ready alternative to the traditional CSS resets. It is a small customizable CSS file, which provides better cross-browser consistency and exactly targets only the styles that require or benefit from normalizing. It supports a wide range of browsers (including IE 8+, Google Chrome, Mozilla Firefox 4+, Opera 12+, and Apple Safari 5+) and being used in some form by Twitter Bootstrap, HTML5 Boilerplate, CSS Tricks, Gov.uk, and many other sites, toolkits, and frameworks.

* * *

Sass for WordPress

Sass for WordPress is a plugin that allows you to use Sass and Compass in your WordPress Project. It re-compiles your CSS, whenever it detects any change in your Sass files. In order to use this plugin, you’re required to install Sass and Compass gems on your hosting environment. If you don’t want to install them on your server, we recommend you to run the plugin on your local server and upload the compiled CSS along with your theme reset.

* * *

Grails Sass/Scss Plugin

Grails is an open source Compass framework that is used by popular organizations such as Netflix, LinkedIn and Sky. It provides developers a seamless and productive development experience by taking advantage of programming language “Groovy”. This plugin provides SASS, Compass and SCSS support for Grails, and automatically compiles SASS/SCSS files and adds the functionality of other frameworks.

* * *

Breakpoint

Breakpoint is a Compass extension that makes it easy to write media queries in Sass. Just create a variable using a basic syntax, based on most common media queries, and then call it through the “breakpoint” mixin. Breakpoint will handle all of the heavy lifting, from handling cross-browser compatibility issues to writing the media query itself.