Image
Technology
(Savoir faire, savoir vivre)

(Savoir faire, savoir vivre)

Contents

Donate to Pakistan Floods Appeal

SASS: It's CSS, Jim, but not as we know it

Power and elegance

Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly...

(From the SASS homepage, http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html ).

Programmer's soul

Whilst separating content from presentation is widely accepted as a Good Thing, and Cascading Style Sheets are considered to be the best way of achieving this, as a style description language CSS leaves a lot to be desired. It is completely lacking in structure, breaks the DRY principle and in general leads to inelegant markup which would be completely unacceptable in any respectable programming language. Of course, CSS is not exactly a programming language, more of a meta-language really, but even so, my programmer's soul rebels whenever I have to use it.

Awesome

SASS, which stands for "Syntactically Awesome Style Sheets", is indeed awesome. It provides a clean and almost object-oriented layer around standard CSS elements. The sass script is compiled by the sass program to produce a perfectly valid CSS file. This compilation process is very fast indeed, and can be incorporated into a build script, compiled by a background process, or incorporated into some IDEs or editors.

Off the rails?

SASS was designed as an add-in for Ruby/Rails, but it can also be used independently. Once installed, you simply run a shell command which takes a SASS formated file (.scss or .sass) and converts it into a standard CSS (.css) file. Files in .sass format use indentation to indicate the CSS block structure, and files in .scss format use the same curly-bracket syntax as standard CSS. In fact, a standard CSS file is a valid SASS file, which means you can start with an existing CSS file and migrate it gradually to SASS. The .scss (CSS-like) format is newer than the previous .sass format, although the .sass format will continue to be supported indefinitely.


Installation (Linux/Ubuntu)

Install Ruby

(Bash)
$ sudo apt-get install ruby

Install Gem installer

(Bash)
$ sudo apt-get install rubygems1.8

Install latest SASS gem

(Bash)
$ sudo gem install haml-edge

Create links to make the executable programs accessible

In a directory in your PATH (say, /usr/bin), create the following links:-

(Bash)
$ cd /usr/bin    #or other directory in your $PATH
$ sudo ln -s $HOME/.gem/ruby/1.8/bin/sass
$ sudo ln -s $HOME/.gem/ruby/1.8/bin/css2sass
$ sudo ln -s $HOME/.gem/ruby/1.8/bin/sass-convert

Usage

(See http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html for more details.)

(Bash)
$ sass input_file_name.scss output_file_name.css

There is also a background daemon available, which will watch your SASS / SCSS files for changes, and compile them on the fly.

Some examples:

Variables
(SCSS)
$Blue: #0000FF;
background: $Blue;
Nesting
(SCSS)
$vert: #00ff00;
$rouge: #ff0000;
$noir: #000000;
#main p {
  color: $vert;
  width: 97%;
  .redbox {
    background-color: $rouge;
    color: $noir;
  }
}
Mixins
(SCSS)
@mixin sexy_border($color, $width: 5px) {
    border: {
        color: $color;
        width: $width;
        style: dashed;
    }
}
/* Mixin examples */
p { @include sexy_border($blue); }
h1 { @include sexy_border($blue, 2em); }

Valid XHTML 1.1 Image Image © 2010 Simon Tite, all rights reserved