Bawk.org

I started a new project yesterday, which is going to be called, wtfzilla. Awesome name, eh?

So I decided to make the switch from erb to haml and sass. It did not take me very long to get up and running, but there were a few things that were not totally clear to me. So I will try to clearly explain the installation for those who have never used haml/sass before.

Step 1 : Open up your console and install the gem.
gem install haml

Step 2 : Tell haml to install the plugin for your application. Type this in your console (Of course substituting myprojects/wtfzilla for your applications path)
haml —rails myprojects/wtfzilla

Note: You can also add config.gem ‘haml’, to your enviroment.rb file.

You should now have a ‘haml’ folder under your Vendor/plugins directory. Right? Ok good.

Now that haml is installed, Simply create or rename your view files to have a .haml extension, thats it! (Well, you will have to convert your erb code to haml, obviously)

Now what about sass? No worries, Sass Is already installed with haml!, cool huh?

Now to get sass working!

Step 1 : If you don’t want to add any additional code to your enviroment.rb all you need to do is create a new directory named ‘sass’ underneath of your public/stylesheets directory. (If you DO want to configure this different read here)

Eg: MyApp/public/stylesheets/sass/

Step 2 : Either create a new sass stylesheet, or convert your existing stylesheets via the command line.

like so:
css2sass path/to/file.css myapp/public/stylesheets/sass/file.sass

Note: .sass files will auto-magically be converted to .css files, which will be located in public/stylesheets, but who wants to look at css anymore? Not me! :P

Now that you have converted your view to haml, and your stylesheets are sassy, everything else still works exactly the same.

In your application.haml file, or wherever you are trying to include your css file, simply place:

= stylesheet_link_tag ‘my_stylesheets_name’
annnnnd, Viola!

If you have any questions or problems feel free to leave a comment and I will help you the best I can!