Introduction to Sass
Sass, or Syntactically Awesome Style Sheets, promises us to rid us from annoyances over CSS. And it delivers!
Over the passed few months I have noticed an increasing interest for Sass and other CSS alternatives, especially in the developer community. Ofcourse this peaked my interest too, and I started playing around with my first Sass stylesheets. How could I ever go without?
What is Sass?
In a nutshell, Sass is a superset of the CSS3 syntax (during the course of this article we are going to ignore the older, indented syntax), that infuses your stylesheets with lots of goodies like variables, functions and mixins. Sass is written in Ruby (and requires Ruby to run).
Installation
Sass is run from the command line, and installation is easy:
Mac OS X / Windows
Mac OS X comes installed with Ruby by default. On Windows platforms you'll need to install Ruby manually first.
Ubuntu
First steps
Getting started with Sass is super easy! To convert an existing stylesheet to a SCSS (Sassy CSS), just copy yourstylesheet.css to yourstylesheet.scss. Because any valid CSS3 syntax is also valid SCSS, you just created your first Sass stylesheet! Now you can start enhancing your stylesheets with some Sassy magic.
How does it work?
Sass will compile your SCSS files to valid CSS files. The resulting CSS files are what you include in your HTML. You normally would compile the SCSS files on your local machine, only deploying the generated CSS files to your production server. You can compile SCSS to CSS from the command-line interface.
The following command will compile input.scss and generate a valid CSS file named output.css.
You can also watch a SCSS file for changes in the background, and have Sass compile the resulting CSS file on the fly! This is great for continuous editing and debugging of your stylesheets. Note the semi-colon for specifying the input and output.
Similarly, you can watch an entire directory with multiple SCSS with the following command:
If you want to learn more about the command-line options, execute:
Syntax
Nesting
Now let's have a look at what Sass has to offer us over classic CSS. The first great feature is the ability to nest your styles, which can save you quite the character count with long CSS selectors.
Apart from saving you the extra keystrokes, this will also make life easier if for example the ID of your #nav HTML element would ever change. You'll only need to update the selector once.
The examples in this blogpost are rather simplistic and do not illustrate the problem well, but nesting and other Sass tricks become great assets for real world stylesheets, where maintainability becomes a larger problem as stylesheets grow.
Variables
The second killer feature of Sass is variable support. Imagine you could just define a few common values for colors and fonts in one central location, and would not have to search and replace through an entire stylesheet if one of those values changes. Variables are also a great way to create different themes on a common base CSS framework.
Mixins
Mixins are my favorite Sass feature by a stretch. They allow to define reusable blocks of styles you can import easily in your other CSS rules. Through variable parameters, you can make them even more flexible.
Importing
By default, the CSS @import directive will result in additional HTTP requests for every imported stylesheet. Sass enhances this by pulling in the contents of the imported stylesheets, resulting in one combined output file. You can also create separate partials which include only mixin definitions for example. When you import a partial, any mixins or variables defined in the partial are available in the including stylesheet.
Partials which should only be imported and not compiled to an individual CSS file, should have their filenames prefixed with an underscore, eg. _mixins.scss.
Functions
Sass comes with a few convenient functions, you'll absolutely adore the color functions. These allow for example to mix two different colors together:
There are even more functions available, be sure to check them out on the official Sass website. If you're a bit handy with Ruby, you can even extend Sass with your own functions!
Conclusion
This was a very brief introduction to Sass, intended to get you started with the language. Once you feel familiar with the basics, be also sure to check out Compass, a CSS framework built on Sass with tons of predefined mixins and more to use in your stylesheets. More info about Sass and Compass on the following URLs: