Sass and the Asset Pipeline

One of the most notable differences between Rails 3.0 and more recent versions is the asset pipeline, which significantly improves the production and management of static assets such as CSS, JavaScript, and images. This section gives a high-level overview of the asset pipeline and then shows how to use a remarkable tool for making CSS called Sass, now included by default as part of the asset pipeline.

  The Asset Pipeline

The asset pipeline involves lots of changes under Rails’ hood, but from the perspective of a typical Rails developer there are three principal features to understand: asset directories, manifest files, and preprocessor engines.8 Let’s consider each in turn.

Asset Directories

       In versions of Rails before 3.0 (including 3.0 itself), static assets lived in the public/ directory, as follows:

• public/stylesheets
• public/javascripts
• public/images

Files in these directories are (even post-3.0) automatically served up via requests to http://example.com/stylesheets, etc.
              Starting in Rails 3.1, there are three canonical directories for static assets, each with its own purpose:

• app/assets: assets specific to the present application
• lib/assets: assets for libraries written by your dev team
• vendor/assets: assets from third-party vendors

As you might guess, each of these directories has a subdirectory for each asset class, e.g.,

At this point, we’re in a position to understand the motivation behind the location of the custom.css.scss file in Section 5.1.2: custom.css.scss is specific to the sample application, so it goes in app/assets/stylesheets. 

Manifest Files

Once you’ve placed your assets in their logical locations, you can use manifest files to tell Rails (via the Sprockets gem) how to combine them to form single files. (This applies to CSS and JavaScript but not to images.) As an example, let’s take a look at the default manifest file for app stylesheets (Listing 5.14).

Listing 5.14 The manifest file for app-specific CSS.
app/assets/stylesheets/application.css

/*
* This  is  a  manifest  file  that'll  automatically  include  all  the  stylesheets
* available  in  this  directory  and  any  sub-directories.  You're  free  to  add
* application-wide  styles  to this  file  and  they'll  appear  at  the  top  of  the
* compiled  file,  but  it's  generally  better  to  create  a  new  file  per  style
* scope.
*= require  self
*= require  tree .
*/

The key lines here are actually CSS comments, but they are used by Sprockets to include the proper files:

Here