Should I use @import or manifest files?

Question

Rails 3.1 introduces a new way of organizing both JS and CSS with the introduction of manifest files. For example, application.js might look like this:

//= require jquery //= require jquery-ui //= require jquery_ujs //= require_tree . 

This will grab various bits of Jquery, all of your own JS, concatenate them together and serve it as a single file to clients. Simple enough.

Unfortunately the picture is not so clear to me with SASS. SASS already has concatenation built in using @import.

Should I change all of my partials into full SASS files and then concatenate them using the manifest file or continue using @import? Why?

Answer 1

Sprockets converts all imports to CSS before concatenating, so it can't be used to share mixins and variables across files. I'm guessing this is going to stay that way just because you can import SASS, LESS and CSS files via that method.

So here's how I do it:

• If I have ERB to include (mostly for asset_path() calls), I put them in my main file, application.css.scss.erb
• If I have vendored CSS I want to include, I require it via Sprockets, e.g. //=require jquerymobile
• In that same file, I use the SASS @import command to explicitly load all files. None of the @import'ed files may be .erb though.
  1. load the basic stuff (e.g. reset) and imports with mixins
  2. declare variables
  3. import the specific styles

Here's how my app.css looks at the moment. Don't forget the ";" and the quotes:

// Using SASS import is required for variables and mixins to carry over between files. @import "reset.css.scss"; @import "mixins.css.scss";  $color_base: #9b2d31; $color_background: #c64e21;  // Using asset_path is important for browsers to use versioned url for the asset. // This lets us do aggressive caching. $logo-url: url(<%= asset_path("logo.png") %>);  @import "application/layout.css.scss"; @import "application/sidebar.css.scss"; @import "application/videos.css.scss"; @import "application/pages.css.scss"; ... 

Note that I'm still exploring the Rails 3.1 asset pipeline, so your mileage may vary. I'll try to come back & update if I find anything else interesting.

Answer 2

The best way to solve this is to use the native @import directive as explained here: https://github.com/rails/sass-rails#important-note

This question was already answered here : how to use sprockets imports with sass

Hope this helps! :)