Introduction to Sass

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.

> gem install sass

Ubuntu

> apt-get install libhaml-ruby

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.

> sass input.scss 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.

> sass --watch input.scss:output.css

Similarly, you can watch an entire directory with multiple SCSS with the following command:

> sass --watch input_dir:output_dir

If you want to learn more about the command-line options, execute:

> sass --help

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.

/* Before */ #nav { float: right; } #nav ul { list-style: none; } #nav ul li { display: inline; } /* After */ #nav { float: right; ul { list-style: none; li { display: inline; } } } /* You can nest properties too! */ .quote { border: { style: solid; left: { width: 2px; color: #ccc; } right: { width: 2px; color: #ccc; } } }

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.

/* Define some variables */ $primary-color: #ffaa00; $secondary-color: #c2b93e; /* Styles */ body { background-color: $secondary-color; } a { color: $primary-color; }

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.

/* Define a mixin */ @mixin rounded($radius: 10px) { border-radius: $radius; -moz-border-radius: $radius; -webkit-border-radius: $radius; } /* Now use your mixins anywhere in your stylesheet */ .dialog { @include rounded; /* will use the default parameter value */ } .button { @include rounded(4px); /* specify a custom parameter value */ }

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.

/* _mixins.scss */ @mixin rounded($radius: 10px) { border-radius: $radius; -moz-border-radius: $radius; -webkit-border-radius: $radius; }

/* stylesheet.scss */ @import "mixins"; /* no need to specify the correct filename, Sass will figure it out */ .dialog { @include rounded; /* will use the default parameter value */ }

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:

body { background-color: mix(red, blue); } /* will compile to #7f007f */ /* Great for creating tints (color mixed with white) or shades (mixed with black) of a single color! */ $color: #ffaa00; $color-tint1: mix($color, white, 80%); /* a lighter tint */ $color-tint2: mix($color, white, 60%); /* even lighter */ $color-shade1: mix($color, black, 80%); /* a darker shade */ $color-shade2: mix($color, black, 60%); /* even darker */

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:

http://sass-lang.com/

http://compass-style.org/

Technologie 26 augustus 2011