Learning Rails 3

Chapter 16. From CSS to SASS

Chapter 3 showed how to add a small amount of CSS to make a Rails application more visually appealing, but only scratched the surface of styling. Rails has added a powerful new component that will help take some of the pain out of styling your app: Sass.

Originally written as an add-on Ruby gem, Sass became part of Rails as of version 3.1. Sass bills itself as a “meta-language on top of CSS” that allows for greater control over styling. If you’ve ever built a website and wished you could assign a color as a variable or eliminate repetition in your stylesheet (among other things), Sass comes to the rescue.

Note

Read more about Sass at http://sass-lang.com/about.html.

Getting Started

Sass actually has two syntax styles and corresponding extensions: .sass and .scss. In the early days of Sass, files ending in .sass used a syntax with an indented system (called, amazingly enough, “Sass”). Whereas typical CSS like that seen in Chapter 3 would have the styles fall between curly brackets such as { and }, code in a .sass file would not look the same. For example, CSS code like this:

    #container {
      background: #FFF; 
      color: #000; 
      text-align: left; 
    }

Would look like this in Sass:

    #container 
      background: #FFF 
      color: #000
      text-align: left

This code is amazingly clean. It’s beautiful. Sadly, it’s not compatible as straight-up CSS without having Sass generate it as such. Therein lies the power of the newer syntax, .scss, also known as “Sassy CSS.”

As the world’s browsers move ...