Getting started with SASS and HAML in Windows – a front end developers guide.

I am one lazy lady – so when I heard there was a way I type less stuff in my day to day job I jumped at the chance. I realise I’m a bit late on the SASS/HAML train, but baby – that’s how I roll.

SASS & HAML are kind of what jQuery is to Javascript. SASS being a framework for CSS and HAML – XHTML. We are only going to be using these tecnologies to create plain ol’ XHTML & CSS so we don’t need to worry about getting all Rubied up (not to a great extent anyway)

Requirements (download & install these)

1. RUBY
2. SASS & HAML (we’ll install this in a bit)

All installed? Sweet.

Getting started with SASS

Of course the SASS tutorial is an excellent place to start, however not being a Ruby developer it took me a little while to figure out how it all fits together in Windows – here’s the lowdown:

1. You will be commonly entering commands in the ‘Start command prompt with Ruby’ application located wherever Ruby was installed on your PC – so run that now and input

   gem install haml

   Thanks to Mikkel Ricky below for letting me Know Sass & HAML have now been split so you’ll also need:

   gem install sass

   this will enable the SASS & HAML parsing functionality

2. SASS has a handy function that will watch an entire folder for changes to .scss files and automatically create .css files.

   sass --watch stylesheets/sass:stylesheets/compiled

   A more Windowsy example:

   sass --watch "D:/Docs/dropbox/web/lr/scss":"D:/Docs/dropbox/web/lr/css"

   This command will watch the folder D:\web\example-site\scss for changes to any .scss files and automatically create a .css file with the same name in D:\web\example-site\css

3. I went one step further and created a batch file that starts the Ruby command prompt and then automatically runs the watch command. Well – I say created I just copied the existing Ruby command prompt batch and added a load of watch commands to the end.

   @ECHO OFF
   REM Determine where is RUBY_BIN (where this script is)
   PUSHD %~dp0.
   SET RUBY_BIN=%CD%
   POPD
   
   REM Add RUBY_BIN to the PATH
   REM RUBY_BIN takes higher priority to avoid other tools
   REM conflict with our own (mainly the DevKit)
   SET PATH=%RUBY_BIN%;%PATH%
   SET RUBY_BIN=
   
   REM Display Ruby version
   ruby.exe -v
   
   REM Run SASS
   sass --watch "D:/Docs/dropbox/web/lr/scss":"D:/Docs/dropbox/web/lr/css"

   Download this script
   Just put the above code in a text file, edit the sass lines, and save it as whatever.bat somewhere nice.
   
   Thanks to commenter Jason for fixing my SASS folder watching code

Now it's time to learn the language a bit. After you have done that, come back here and check out my SASS mixins - you'll probably know what mixins are by then as well.

Getting started with HAML

HAML was a bit of a bugger to get going, but luckily you can learn by my mistakes. For some reason HAML doesn't have a built in watcher command. I spent ages trying to find a Ruby script that would work and the closest I found is this one by Blake Smith. It seemed to screw up windows folders but after a bit of trial and error I came up with this:

HAML watcher for Windows

# Script to watch a directory for any changes to a haml file
# and compile it.
#
# USAGE: ruby haml_watch.rb
#
require 'rubygems'
require 'fssm'
 
directory = ARGV.first
FSSM.monitor(directory, '**/*.haml') do
  update do |base, relative|
    input = "#{relative}"
    output = "#{relative.gsub!('.haml', '.html')}"
    command = "haml #{input} #{output}"
    %x{#{command}}
    puts "Regenerated #{input} to #{output}"
  end
end

Download this script
You'll need to install the 'fssm' gem from the Ruby command prompt:

gem install fssm

Example: (run from Ruby command prompt)

haml_watch.rb d:\web\site1

Also, make sure none of your site folder names have spaces in them! I learnt this the hard way as I keep all my sites in my Dropbox folder which is brilliantly named 'My Dropbox' It wasn't even that easy to rename! Had to use pyDropboxPath.

Forcing HAML to use double quotes

Fix found here Which basically amounts to text-editing engine.rb which I found at C:\Ruby192\lib\ruby\gems\1.9.1\gems\haml-3.0.18\lib\haml and changing the line:

:attr_wrapper => "'",

to

:attr_wrapper => "\"",

Including HAML in HAML

If anyone has a neater way of doing this please email me. Please note your path will be relative to the page you are including from.

= ::Haml::Engine.new(File.read(File.dirname(__FILE__) + '/pathto/file.haml'), instance_variable_get(:@haml_buffer).options).render

Note that HAML will automatically close tags so you can't have half tags in say a header include. EG if you want your header to be

!!!
%html
    %head
        %meta{'http-equiv' => 'Content-Type', :content => 'text/html; charset=UTF-8'}
        %title Lutyens & Rubinstein   
        %link{:rel => 'stylesheet', :type => 'text/css', :href => '/css/meyer-reset.css'}
        %link{:rel => 'stylesheet', :type => 'text/css', :href => '/css/main.css'}
 
    %body
        %div#wrapper
            %div#content

That ain't gonna work as html, body, #wrapper, #content will all be closed off before you include it. Don't worry though as you can mix HAML with plain HTML like so:

!!!
<html>
    %head
        %meta{'http-equiv' => 'Content-Type', :content => 'text/html; charset=UTF-8'}
        %title Lutyens &amp; Rubinstein   
        %link{:rel => 'stylesheet', :type => 'text/css', :href => '/css/meyer-reset.css'}
        %link{:rel => 'stylesheet', :type => 'text/css', :href => '/css/main.css'}
 
    <body>
        <div id="wrapper">
            <div id="content">

bare in mind that HAML seems to cache its includes - I am looking into how to get around this.