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 ...

Get Learning Rails 3 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.