Sassy Themes
Hatkirby on October 15th, 2010 at 8:39:46pmWhile 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 theapp/views
hierarchy, it won't work. This annoyed me because my plan is to have the main site layouts inthemes
and have the admin panel inapp/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 yourconfig/initializers
directory to get SASS working withthemes_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.
Comments