← Sunday IS Funday!

Sassy Themes

While working on the rewrite of Four Island (go 3.0! :D) in Ruby on Rails, I hit a roadblock. Four Island, since perhaps Layout 3, has had an old concept of multiple layouts and since the Theme Switcher, has had the concept of being able to switch between them. How was I going to go about this in Ruby on Rails?

Well, actually, it's quite easy with the help of an awesome gem, [themes_for_rails](http://github.com/lucasefe/themes_for_rails). Note that's the Rails 3 version, if you still use Rails 2 (and most people do), you'll need [theme_support](http://github.com/zedalaye/theme_support). theme_support does technically work for Rails 3 as well, but I don't like it because you can only override views; if there's no corresponding view in the app/views hierarchy, it won't work. This annoyed me because my plan is to have the main site layouts in themes and have the admin panel in app/views because the admin panel never changes but, while pre-3.0 layouts share a ton of code, they are rather different.

Anyway, this was going really well, but there were three things I had to know. First, did it support asset hosts? Second, did it support HAML? And third, did it support SASS? Asset hosts allows you to specify that all assets (javascripts, images and stylesheets) be loaded from an alternative, cookie-less subdomain. And yes, it worked. HAML is an awesome alternative to RHTML/ERB that is really elegant and organized. And yes, it worked. SASS, a sub-project of HAML that is used to generate stylesheets, allows you to nest declarations which I believe makes things make so much more sense. And no, it didn't work.

What? Why? Well, the way SASS works is at runtime, it reads your SASS file and converts it to a CSS file. Since my stylesheets were stored in the themes hierarchy, SASS didn't know where to find them and thus the CSS files weren't generated and my layout couldn't find the stylesheet. However, I wrote a small script that you can place into your config/initializers directory to get SASS working with themes_for_rails:

# Adds Sass support to themes_for_rails

themes = Dir.new 'themes'
themes.each do |theme|
  unless theme == ".." or theme == "."
    Sass::Plugin.add_template_location(
      Rails.root.join("themes/#{theme}/stylesheets/sass").to_s,
      Rails.root.join("themes/#{theme}/stylesheets").to_s
    )
  end
end

And there you go! Sassy themes. It'll probably work with theme_support too, but you may need to modify it a bit.

Hatkirby on
👍 0 👎

Comments

OMG you're finally working on 4I3.0! obtw I still don't like the new font - it's too thin.

tamasys on October 17th, 2010 at 3:08:56am

Don't worry, I don't like it either. Layout 8 has a new font.

Hatkirby on October 17th, 2010 at 11:26:47am

Oh thank god :P.

tamasys on October 19th, 2010 at 9:13:51pm
Replying to comment by :
Feel free to post a comment! You may use Markdown.