CSS’ simplicity is one of its defining features, and a big reason for its popularity. However, as websites and applications become more complex, the size and complexity of stylesheets also increase. CSS can quickly become verbose and repetitive.
But a preprocessor like Sass expands the capabilities of CSS by allowing you to use variables to store values, create mixins for common snippets, nest declarations and help improve the maintainability of the entire project.
Created in 2006, Sass has two syntaxes: the original (also called the “indented syntax”) and SCSS, or “Sassy CSS,” the more popular of the two, as it makes converting an existing website to Sass simple (by changing the file extension from .css to .scss). It doesn’t depend on indentation — it’s written just like CSS, making it easier to adopt.
Compass is the companion open-source CSS authoring framework for Sass.
There are a variety of tutorials, guides, podcasts, videos, presentations and even books on Sass. In this article, we’ll cover the best practical resources and applications to kickstart or advance your Sass knowledge.
Have we missed one of your preferred Sass and Compass resources? If so, please share it with our readers in the comments below.
1. 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 suit both beginners and advanced users. With a team of writers and contributors, it’s regularly updated, and you can follow on RSS, Twitter and Facebook.
Compass.app is a menu bar-only app for Sass and Compass that helps to compile stylesheets easily, without resorting to a command line interface. It’s written in Java (JRuby) and is cross-platform, with no need to install a Ruby environment to use it. It boasts both LiveReload support and Compass Extensions support.
Scout is a cross-platform app that runs Sass and Compass in a self-contained Ruby environment, letting you manage your projects effortlessly. There’s no need to deal with setting up Ruby or learning command line. Scout does all the “heavy lifting” and aims to help improve your CSS workflow by giving you more control, organization and optimization.
Providing a host of CSS recipes made with Compass and Sass, all ready to use, Compass Recipes offers a wealth of backgrounds, effects, icon fonts, forms, layouts, media queries and much more. It’s also hosted on GitHub, available to fork.
Bourbon is a simple, lightweight and comprehensive library of Sass mixins designed to be simple and easy to use. No configuration is required — the mixins aim to be as vanilla as possible, which means they should be close to the original CSS syntax. The prefixes also ensure graceful degradation for older browsers.
6. Bourbon Neat
Neat is a semantic grid framework built on top of Sass and Bourbon. It’s simple yet powerful enough to handle any responsive layout. It promotes clean, semantic markup, relying entirely on Sass mixins, and does not pollute your HTML with presentation classes and extra wrapping divs.
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.
Sassy Buttons is a compass extension that helps you create customizable, attractive CSS3 buttons that are cross-browser compatible, using only a few lines of Sass. The extension gives you a set of mixins and defaults to create your custom buttons. The provided defaults can be customized, with five different gradients and three text styles to choose from.
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.
Forge is a free command-line toolkit for bootstrapping and developing WordPress themes in a tidy environment, using front-end languages like Sass, Less and CoffeeScript. It creates a source folder with base template files, SCSS files and theme options, then automatically compiles to your local WordPress install(s) as you save changes. When you are ready to distribute your theme, Forge will build it to a folder of your choice or bundle the theme into an easily installed zip package.
Normalize.css is a popular HTML5-ready alternative to CSS resets. It makes browsers render all elements more consistently and in line with modern standards, precisely targeting only the styles that need normalizing. This is the Sass/Compass port of that file, which utilizes legacy IE support variables, a CSS3 box sizing mixin and vertical rhythm mixins.
Sass for WordPress is a plugin that enables the use of Sass in WordPress projects, with support for both Sass and SCSS syntax. It watches for changes to your Sass files and re-compiles your CSS when needed. We recommend you run the plugin locally when developing your theme(s) and upload the compiled CSS along with the reset of your theme, if you can’t or don’t want to install the Sass and Compass gems on your hosting environment.
Sassaparilla is a fast way to start your responsive web design projects, harnessing the power of Sass and Compass. Its core focus is on better, beautiful typography with the correct vertical rhythm. It allows you to work in pixels, then compiles in Ems, and works with CSS variables, keeping them all in one place for safe keeping. Setup is simple, with extensive documentation, available on GitHub to fork.
Sassy Modular Scale is a Sass-based mixin that calculates the incremental values of the modular scale in proportion to a set size and ratio. It was inspired by and adapted from Tim Brown’s Modular Scale, and can be used as a Compass Extension or installed as a Ruby gem. Included are functions for a number of classic design and musical scale ratios, with the ability to add your own ratios, as well.
MVCSS is a Sass-based CSS architecture for creating predictable and maintainable application style, broken down into three primary sections: application, core and modules. The architecture and accompanying Styleguide and Library mesh preferred practices and other well-documented methods, such as OOCSS, BEM and SMACSS, into one place.
18. Bootstrap Sass
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. There is also a Chrome Extension for Live Browser Refresh, but please note, it is a Windows-only application.
20. Assembling Sass
Assembling Sass is a free online course from Code School to learn Sass and start improving your front-end workflow, so you can use Sass for efficient, time-saving styling on large-scale applications. It boasts a solid understanding of Sass, from the foundation to variables, mixins and CSS management to simplifying and optimizing your responsive workflow.
21. Sass Style Guide
CSS Style Guides are common; however, Chris Coyier of CSS Tricks extends this idea to cover choices unique to Sass. While there are common rules you should follow for any style guide, this is a specific list to Sass, including guidelines on nesting, variables, vendor and global dependancies, partials, line mapping, comments, media queries and CSS.
FireSass allows Firebug to display the original Sass filename and line number of Sass-generated CSS styles, making it useful for Sass development. To use, just download and install FireSass, then enable Sass’s “debug_info” option. Please note: It hasn’t been updated for some months, but it’s worth exploring as a useful tool in your workflow.
Zocial is a CSS3 social buttons Sass framework. And the vector icons are implemented with a Sass @font-face mixin, usable as a Compass extension. The project includes buttons for Twitter, Facebook, Google+, GitHub, RSS, Smashing Magazine and many more. There is also full documentation on how to get started.
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.
Grails is an open source, full stack web application framework, used by companies such as LinkedIn, Sky and Netflix. It takes advantage of the Groovy programming language to provide a productive and streamlined development experience. This plugin adds Compass, Sass and Scss support to Grails, and automatically compiles the code.