Learning Rails 5

Chapter 16. From CSS to Sass

I try to apply colors like words that shape poems, like notes that shape music.

Joan Miro

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 a powerful component that will help take some of the pain out of styling your app: Sass.

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 the Sass website.

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 braces 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 to take advantage ...