Rails 3.1: Scripts with Coffee and Styles with Sass

[](http://www.wearefine.com/mingle/wp-content/uploads/2011/08/rails.png "")*There's more than meets the eye to aFINEsite. Here's a glimpse at some of the behind the scenes technology evolution that's going to enable us to deliver more and better web experiences through the magic of Ruby on Rails. *

Ruby on Rails aims to promote good ideas and technologies. As the Rails community (and the FINE PDX basement) get excited about the release of 3.1, it's easy to see that gospel in action. Not only is Rails 3.1 dropping Prototype for jQuery, but we'll see the addition of a couple slick dependencies: CoffeeScript and Sass.

The jQuery Takeover

We knew it was going to happen. As jQuery has dominated the Javascript library scene for a couple of years, it was only a matter of time before Rails would make the switch.

Of course, this only saves jQuery-loving Rails developers the minute it takes to install the jQuery gem, but I applaud the Rails team for understanding their user base and adjusting accordingly.

CoffeeScript

CoffeeScript is a Ruby-like language that complies into Javascript. This allows you to write Javascript with the elegance of Ruby, while ignoring some of Javascript's peskier syntax.

The major benefit of CoffeeScript is the readability of your final code. Take the following piece of Javascript:

if (typeof is_coffeescript !== "undefined" && is_coffeescript !== null) {
  celebrate("Woo!");
}
var celebrate = function(noise) {
  return alert(noise);
};

Now let's see how we can write that in CoffeeScript:

celebrate "Woo!" if is_coffeescript?
celebrate = (noise) -> alert noise

Oh snap! I bet you want to learn more, don't you? Well, there's a website for that.

Sass

Sass is a similar complier language for CSS. It allows you to take a static stylesheet and add nesting, variables and inheritance to give it dimension and reusability.

Here's an example of some Sassy CSS:

$border-color: #ce4dd6;
$link-color: #982C2C;

#navbar {
  height: 23px;
  border-bottom: {
    color: $border-color;
    style: solid;
  }
  ul { list-style-type: none; }
  li {
    float: left;
    a { color: $link-color; }
  }
}

Which would compile to:

#navbar {
  height: 23px;
  border-bottom-color: #ce4dd6;
  border-bottom-style: solid;
}
  #navbar ul { list-style-type: none; }
  #navbar li { float: left; }
    #navbar li a { color: #982C2C; }

This small example doesn't give Sass justice. As your stylesheet grows, nesting handles selector priority for you while variables will prove to be invaluable for shared colors, widths, etc. You can even store blocks of styles in variables they call mixins.

Learn more about Sass: http://sass-lang.com/

Compile and Make It Ugly

Finally, how and when are these dependencies compiled? Rails 3.1 moved scripts and styles into the app/assets directory. All Javascript files within that directory get bundled together into a single file using Sprockets.

If your running your app server in development, Rails will automatically compile your Sass and CoffeeScript and bundle the files every time a page is requested. This allows you to make changes to the files and test them without restarting the app.

However, if the server is running in production Rails does a couple nice things for you. First, it caches the complied version of the files. This means you have to restart the app if you make changes, but it also increases the app performance, since the compiling doesn't happen at each page request. Also, while Rails is bundling all you Javascripts together, it automatically minifies the file allowing your scripts to load quickly and making YSlow happy.

[](http://www.wearefine.com/mingle/wp-content/uploads/2011/08/Screen-shot-2011-08-12-at-11.56.51-AM.png "")

Good idea.