Normally, Every web developer is accustomed to use CSS, but as simple it might be to write CSS, SASS provides a few benefits, that are difficult to miss. Benefits like?

First Things First, Why is Sass called Syntactically Awesome Stylesheets.

Now people who would have used haml to define their views for rails applications would strike a chord with sass in an instant. Why? because sass takes its style of syntax from haml itself. nested elements. Now I do use sass for my rails applications, but It doesnt mean its limited to rails only,  you can use it anywhere you have to use css, I personally use it for generating css files for sencha touch too.

Example Sass File

.tweet-wrapper {
  h2 { font-weight: bold; padding-bottom: 3px; }
  img { border-radius: 5px; float: left; }
  .tweet { font-size: 70%; margin-left: 60px; min-height: 50px; }
  .posted { float: right; }
}

Sass converted to CSS

/* line xx, styles/default-theme.scss */
.tweet-wrapper h2 {
  font-weight: bold;
  padding-bottom: 3px;
}
/* line xx, styles/default-theme.scss */
.tweet-wrapper img {
  border-radius: 5px;
  float: left;
}
/* line xx, styles/default-theme.scss */
.tweet-wrapper .tweet {
  font-size: 70%;
  margin-left: 60px;
  min-height: 50px;
}
/* line xx, styles/default-theme.scss */
.tweet-wrapper .posted {
  float: right;
}

The “xx” provides the line numbers of the sass file, from which the css is generated. Nifty feature to debug, if you made some error, because SASS files tend to get lengthy, but well, less than your CSS files atleast.

Now there are two of the basic ways, in which you can compile SASS/SCSS to CSS files, one of them being the sass way, and another being using Compass.

1. Add this to your gem file and do a Bundle Install

gem "sass", "~>; 3.1.18"

2. From your command line/terminal, type

sass --watch style.scss:style.css

This will invoke the sass executable that got installed from the gem and will create your stylesheet in CSS, pretty easy, right?

The second way of generating CSS from SASS is by using Compass, which I use too. The reason you would like it better too is, One its being used by a lot of websites, which you like a lot and More importantly its not always necessary, that you use sass to css only for your rails projects, as I said, you can use it for any other web project.

1. Well, if you are using it for your rails project, just add the below code to your gemfile and run a “Bundle install”, but If not, you can just install the gem compass directly

gem "compass", "~> 0.12.1"

Installing gem directly

gem install compass

Yes, for both the ways, you have to first install ruby to your system.

2. In the directory, where you have your sass file you need to create a config.rb file, which compass uses to expand your sass to css.

# get the firectory that this configuration file exists in
dir = File.dirname(__FILE__)

# Load the sencha touch framework
load File.join(dir, '..', 'touch', 'resources', 'themes')

#look for any *.scss files in the same directory as this file
#place compiled *.css files in the parents drecotory
sass_path = dir
css_path = File.join(dir, "..")
output_style = :expanded        # change it to :compressed, if you want a small size compressed file
environment = :development      # change it to :production , if you want a small size compressed file

3. Now from the Terminal, change your working directory to the one where you have yous sass file and run

compass compile

4. When you are still add code to your sass file, you can instead choose to make compass watch your sass file and auto generate css whenever you make any changes.

compass watch