Introduction to Sass

Sass is a CSS preprocessor that can help make your CSS more maintainable. Sass can be especially useful on larger projects with lots of CSS code.

Sass stands for Syntactically Awesome StyleSheets. Although it's an acronym, it's usually written in title case (Sass) as opposed to capitalized (SASS).

The way Sass works is, you write your code to a Sass file, then Sass automatically converts your code into a CSS file.

So you don't update the CSS file — you update the Sass file.

The code in the Sass file is similar to CSS, except that it typically has extra stuff, such as variables, mixins, mathematical operators, etc.

For example, you can create a variable to store a common value to be used across many selectors. This saves you from having to repeat the same value across all of those selectors. If you need to update it, you only need to do it once — where you set the variable.

To use Sass, you need to install it first. It runs on Ruby so that also needs to be installed.

Using Sass

Sass can be used in three ways: as a command-line tool, as a standalone Ruby module, and as a plugin for any Rack-enabled framework, including Ruby on Rails and Merb.

Writing Sass

Sass supports the full CSS syntax, as well as a set of extensions called SassScript. SassScript allows properties to use variables, arithmetic, and extra functions. SassScript can be used in any property value.

SassScript can also be used to dynamically generate selectors and property names, which is a very powerful part of Sass.

Advantages of Sass

One of the main advantages of Sass (and other preprocessors), is that it helps keep large style sheets well-organized. It also provides extensions to CSS such as variables, functions, nesting, and mixins. This allows you to take more of a programatic approach to your style sheets.

But Sass isn't just for larger style sheets. It can also help get smaller style sheets up and running quickly. Sass can help speed up your CSS development once you learn how it works.