Click here to Skip to main content
Click here to Skip to main content

Tagged as

Go to top

Leveraging Rails 3.1, SCSS, and the assets pipeline to differentiate your stylesheets

, 10 Jan 2012
Rate this:
Please Sign up or sign in to vote.
How to differentiate your stylesheets, and have different page styles using Rails 3.1, SCSS, and the assets pipeline.

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

lassebunk

Denmark Denmark
Lasse is a long-time programmer, having more than 20 years of programming experience and more than 15 years of experience programming for the world wide web. He writes articles about Ruby on Rails, programming, SEO, and, recently, iOS programming.
Follow on   Twitter

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web02 | 2.8.140916.1 | Last Updated 10 Jan 2012
Article Copyright 2012 by lassebunk
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid