Skip to content

using haml, sass and coffeescript

filtercake edited this page May 20, 2012 · 2 revisions

using guard, you can set up your file-/folderstructure like this (i'm staying near the provided bootstrap-based template for now):

themes/
    Guardfile
    my_theme/
        abstractions/
            coffee/
            layouts-haml/
            sass/
        js/
        layouts/
        css/
        manifest.yml

I chose to have one single Guardfile in my themes folder and switch themes via a variable:

# Guardfile. More info at https://github.com/guard/guard#readme
# required gems: guard, guard-haml, guard-sass, guard-coffeescript

# variable to switch themes:
theme = "my_theme"

puts ""
puts "===> guard will watch the theme stored in "+theme+" <==="
puts ""

guard 'haml', :input => theme+'/abstractions/layouts-haml', :output => theme+'/layouts', :all_on_start => true do
  watch(/^.+(\.html\.haml)/)
end

guard 'sass', :input => theme+'/abstractions/sass', :output => theme+'/css', :all_on_start => true, :extension => ''    

guard 'coffeescript', :input => theme+'/abstractions/coffee', :output => theme+'/js', :all_on_start => true

you can now edit your haml/sass/coffee-files after doing

$ cd themes
$ guard

and they will be re-rendered on save.

you can find this version of the theme at https://github.com/filtercake/ruhoh-twitter-theme-haml-sass-coffee

Clone this wiki locally