An Introduction to Sass in Rails

Sass, (Syntactically Awesome Stylesheets) is a meta-language, which has redefined CSS for “programmers” around the world.

Not only does it supplement CSS, it brings out the fun in web designing. Apart from the weird logo of the “sassy” lady attending to the phone, Sass is truly elegant and awesome (but that could just be me).

I remember my colleague who approached CSS from a programming background.  He complained that it lacked certain functions, common to all traditional programming languages. As you probably know, CSS has nothing to do with that kind of programming. However, dynamic style-sheet languages, such as LESS and Sass, offer many additional features over CSS that mimic traditional programming constructs.

You might have noticed something like this in the Gemfile of your web app (if you’re running Rails 3.1)

Rails 3.1+ provides support for Sass by default, which has become popular among the Rails community.

Until Rails 3.0, the asset pipeline was available only via third-party libraries such as Sprockets.  The assets (images, JavaScript and stylesheet files) were placed under the public directory. In Rails 3.1, you can place them under apps/assets.

Rails treats your javascript code, stylesheets and images as assets and helps you boost the speed in a development environment. The asset pipeline offers you the ability to precompile, concatenate and compress your assets. Fingerprinting, which is hardwired into the asset pipeline, provides a reliable caching technique.

So, What is the Asset Pipeline?

The asset pipeline enables you to store your assets in one central library.  Technically speaking, it links together your assets into one master file, reducing the number of requests made by the browser.  This can greatly speed up page  load time. (I will get back to this soon)

It also allows you to write your assets in dynamic languages, such as SASS for CSS or Coffeescript for JavaScript. As a rails developer, you may feel more comfortable with Sass and CoffeeScript, but you can still use the “base” languages to create your assets.

You can also place your assets under

  • lib/assets – assets for libraries, such as jQuery.
  • vendor/assets – assets associated with third party apps and frameworks, such as plupload.

To get a better idea about the asset pipeline, visit the official Ruby on Rails guide.

Now, let’s dig a bit deeper by exploring the stylesheet assets of our new rails application.

Open up app/assets/stylesheets/application.css (which is the default manifest file for stylesheets) in your favorite text editor, and you will find the following CSS comment:

Although the whole text is a CSS comment, the lines

are utilized by Sprockets to include the required stylesheets, and to concatenate them into one master file.

This ensures that all the CSS/SCSS files in the current directory (including any sub directories) are included in the web app’s CSS.

has also been specified to ensure that the application.css file is included.

To work its magic, all we need to do is create a new file. Lets name it sass_sample.css.scss. You can place your CSS in several files since they will get concatenated at run time, as long as they are under the stylesheets directory.

The extension SCSS stands for sassy CSS and it’s 100% compatible with CSS3. All your CSS3 code will work without any trouble. Sass has another indented syntax with the extension .sass, but it’s old and has lost ground in the community.

SASS is beautiful, but wouldn’t it be worth more if we could somehow integrate SASS with a CSS framework?  Blueprint and 960 Grid are awesome tools and here’s how you can integrate them with SASS. Since Blueprint and 960 Grid are 3rd party frameworks, we can place them under /vendor/assets/stylesheets.

For the sake of this tutorial, I will guide you through the process of setting up Blueprint with SASS.

  1. Download the latest Blueprint CSS tarball from blueprint.org or GitHub.
  2. Open up the command line and untar the files.
  3. Copy the blueprint folder to your app’s vendor/assets/stylesheets/.
  4. Add these lines to /app/views/layouts/application.html.erb. This will link the blueprint stylesheet to our web app’s layout.

    Make sure they are placed at the top, before application.css gets linked. That’s it, you are done with setting up blueprint with SASS.

Although Blueprint is a pure CSS framework, it will work out with SASS because SASS’s new .scss syntax is completely compatible with CSS. Can you believe that? You can now access Blueprint’s reset, typography, grid, forms, ie, and print stylesheets in your web app without any hassle.

If you are a twitter bootstrap fan, there is also a gem for that.

But you would have to add the line

into your .scss file to make it work.

Enough with the talk, let’s start coding. If you’re like me, you like throwing around the same colors or gradients on the page with some slight variation. The hardest part is remembering them all, but SASS lets you store colors as variables. Wouldn’t it make more sense to use $androidgreen rather than #A4C639?

There is another interesting technique available in SASS; it lets you do arithmetic operations with variables. You can add two colors like so:

SASS can do much more than just simple color manipulation; you can also manipulate HSL values of colors and play around with alpha transparency. These functions let you play god in the world of web designing.

In addition to color manipulation, you can also nest your CSS code.

It gets compiled into;

Sass offers several more useful functions over CSS, such as mixins, selector inheritance and control structures which allow developers to create static stylesheets whilst making use of dynamic methods. SASS also does a good job in keeping your code “DRY” and making it easier to maintain.

If that sounds cool, stay tuned for the next post where a lot more will be covered on SASS and you will start coding in SCSS.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • no name

    Gracias me fue de ayudad, buen trabajo ! :D