38

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?

Rupert Madden-Abbott
  • 12,899
  • 14
  • 59
  • 74
  • I already have problems with existing codes that broke on the new asset pipeline of 3.1... I am still unclear on how to use sass on this – Draiken Jun 08 '11 at 18:33

3 Answers3

30

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.

webmat
  • 58,466
  • 12
  • 54
  • 59
  • 3
    Just a note that I think you can skip the .css.scss from your @imports. At least, my application works without them. – Rupert Madden-Abbott Jun 17 '11 at 00:02
  • 3
    It is also necessary to use *= depend_on "_partialName" in the manifest header for each @import dependency. This duplication is annoying but without it, sprockets will fail to recognize when a partial has been updated and so won't regenerate the file. I've taken the liberty of updating your answer with both this and the above change. Feel free to change it back if you disagree. – Rupert Madden-Abbott Jun 17 '11 at 04:08
  • 7
    You should not use the Erb style 'asset_path' in SASS. Instead use the sass-rails gem which gives you a sass helper method called asset-path. Read more under Features -> Asset Helpers at https://github.com/rails/sass-rails – Thomas Watson Aug 04 '11 at 12:51
  • I always thought the ERB approach was a bit clumsy. I'll look into this SASS helper. Thanks Thomas! – webmat Aug 09 '11 at 01:34
  • 6
    You can also use globs for @import in your application.css.scss file, e.g. "@import 'scss/**/*'". And you do not need to use depend_on anymore, as when the files that are imported are updated sprockets will recompile the assets. – mattwindwer Aug 19 '11 at 20:07
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! :)

Community
  • 1
  • 1
user2263402
  • 29
  • 1
1

The sass-rails gem explicitly states not use the require syntax with SASS files - use SASS's @import statements instead.

Yarin
  • 173,523
  • 149
  • 402
  • 512