如何在 Rails 3.1 中管理 CSS 样式表资产？

Question

I'm just learning the new asset pipeline in Rails 3.1. One particular problem I'm having is with the way Sprockets just mashes all the found CSS stylesheets into one massive stylesheet. I understand why this is advantageous over manually merging stylesheets and minifying for production. But I want to be able to selectively cascade stylesheets instead of having all rules all mashed together. For instance, I want:

master.css

to be loaded by all pages in the Rails app, but I want

admin.css only to be loaded by pages/views within the admin section/namespace.

How can I take advantage of the great way that Rails 3.1 combines stylesheets and minifies them for production, but also have the former flexibility of being able to load only certain stylesheet combinations per layout?

Or should this be done by adding a class to body tags in layouts-

body class="admin"

And then target style rules as appropriate. Using SASS scoped selectors this might be a reasonable solution.

Answer 1

This is how i solved the styling issue: (excuse the Haml)

%div{:id => "#{params[:controller].parameterize} #{params[:view]}"}
    = yield

This way i start all the page specific .css.sass files with:

#post
  /* Controller specific code here */
  &#index
    /* View specific code here */
  &#new
  &#edit
  &#show

This way you can easily avoid any clashes.

Hope this helped some.

Answer 2

I have a post about this on my website: Leveraging Rails 3.1, SCSS, and the assets pipeline to differentiate your stylesheets

And check out this answer to another question: Using Rails 3.1 assets pipeline to conditionally use certain css

Hope this helps.

Best regards, Lasse

Answer 3

@nathanvda: sure...

We make use of multiple layout files. So in our app/views/layouts, instead of having just application.html.haml (we use HAML), we actually ignore the application layout and use 3 custom layouts:

admin.html.haml (admin section views only)

registered.html.haml (registered/signed in users views only)

unregistered.html.haml (unregistered/unsigned in users views only)

So at the top of my admin.html.haml file I will have my stylesheet link tags to a separate admin.scss (we use SCSS) manifest. That manifest will load any necessary sub-stylesheets just for the admin section. This allows us to specify rules just for the admin section while also making use of common styles. For instance, we use jquery-ui throughout the site, so the styles associated with jquery-ui sit in their own stylesheet and we include them in the manifests for all 3 css manifest files.

This solution doesn't give you a single CSS file that can be cached, but it ends up giving you 3 CSS files, each of which can be cached. This allows a tradeoff between performance and some flexibility in organizing CSS rules so we don't have to worry about CSS rule collisions.

Answer 4

The way I've been doing it so far is to have two seperate folders a/ and u/ where a/ is for the admin view and u/ is for the user view. Then in the layout I point to the appropriate application.css with assets/u/application.css(js). Bit of a pain having to move the auto generated files each time but a lot less than having to require each file individually in the manifest.

Answer 5

I use something like

application.html.erb ">

show.html.erb

content_for:body_id do page_specific_body_id end