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