So, you've got different stylesheets and want to upgrade to the Rails 3.1 assets pipeline? The challenge in doing this is that all stylesheets will be compiled together to one file therefore we need another method to differentiate our sites.
Here I will show how to use SCSS/CSS on the body-tag to differentiate between two different sites, and between the various pages on each site.
1. Differentiating your content
Let's say that you are building a mobile and desktop site and want to differentiate your content sitewise. (If you're building a mobile site, the actual server-side separation of the content can be done with a plugin like mobile-fu which works really great.)
Start by inserting a desktop and mobile class in your body-tags, like this:
<body class="desktop">
and for your mobile site:
<body class="mobile">
Next, add the following method to your application_helper.rb:
def find_named_routes routes = []
Rails.application.routes.named_routes.each do |name, route|
req = route.requirements
if req[:controller] == params[:controller] && req[:action] == params[:action]
routes << name
end
end
routes
end
This method will find all named routes based on the current controller and action. It will also find duplicate routes and localized routes if you are using a route translation gem like i18n_routing.
Now you can add the method to your body-tags like this:
<body class="desktop <%= find_named_routes.join(" ") %>">
This way you'll get body-classes like root, categories, category, and so on. These can be used to differentiate your content later on. We will do this using SCSS.
2. Creating the CSS
SCSS is an extension to CSS which among a lot of other featured allows you to nest your content. Instead of:
.blah ul { ... }
.blah p { ... }
.blah a { ... }
in SCSS, you can do it like this:
.blah {
ul { ... }
p { ... }
a { ... }
}
And it will generate the exact same CSS. Neat, eh?
So now we can use this technique to differentiate our sites and individual pages. Like this, in desktop.css.scss:
body.desktop {
margin: 20px;
font-family: arial, helvetica, sans-serif;
a { color: black }
p { margin-bottom: 10px; }
h1 { color: green; }
}
In categories.css.scss:
body.desktop.categories {
h1 { color: red; }
}
And in mobile.css.scss:
body.mobile {
margin: 10px;
font-family: arial, helvetica, sans-serif;
a { color: red }
p { margin-bottom: 5px }
}
Pretty sweet. Now you just need to compile your assets, and you're good to go.
