Setting up SASS with Ruby and Compass on Your Computer

I don’t know if I just didn’t do enough digging, but the process for setting up SASS using Ruby took several sources online and some trial and error to really get things running. I did attempt to go with the simple method of just using one of the precompiling apps (prepros), but it seems like there were some issues with it not automatically picking up changes, so I think going the Ruby direction should solve this. The steps for setting up Ruby and Compass, which allows you to write SASS files and have them compile down to CSS is as follows:

Ruby, SASS & Compass Installation

1. Download the Ruby Installation File: http://rubyinstaller.org/downloads/ Grab the latest recommended version of Ruby (currently on that page it specifies to use Ruby 1.9.3, which isn’t the latest version. I went ahead and took the recommendation.
2. Run the installation!
3. After installation, go to the folder for Ruby that was just created in the start menu. Click on the ‘Open Command Prompt with Ruby’. (Windows 8 — I had to do a search for ‘Ruby’, which then brought up the ‘Open Command Prompt with Ruby’ as one of the results).
4. In the command prompt, enter the following to install compass (which also brings in SASS):
   gem install compass

Setting Things Up

If you already have a project you’re working on, make sure the path to that project doesn’t have any spaces in it. For instance, the following will cause problems: c:/websites/my website/, but this won’t: c:/websites/mywebsite/. In the command prompt that you previously opened through the Ruby folder in the start menu, enter the following to ‘create’ your project (of course change the c:/ to whatever it needs to be:

Changing the Folders Your SASS Compiles To

The above process should set up the folders needed for sass. However, these folders actually weren’t how I wanted things set up. It compiles the CSS to a folder called ‘stylesheets’, I wanted it to go into the ‘css’ folder, so I needed to change that. To do so, go to your website directory and open the newly created ‘config.rb’ file and change the ‘css_dir’ variable to the folder you would like the files compiled to. 

You’ll also probably want to add ‘sourcemap = true’ to the file, this will map the scss file with it’s respective css file.  This is helpful when you are debuggin (or editing!) in chrome or firefox, and want it to tie back to the scss file so you can make the change (as opposed to the css file).

Automatically Update the CSS

Of course the goal here is just to have things automatically work, which means as you make changes to the SCSS file, the CSS file should automatically update as well. To do that, open that command prompt again, and enter the following:

Hopefully everything is working at this point, and you’re SASSing it up!
 

More Stuff

It’s easy to automatically minify the css that is generated as well.  To do that, open up the config.rb file, and add ‘output_style = :compressed to it.

As a summary of the config.rb file at this point, the meat of the file looks like:

http_path = "/"
css_dir = "css"
sass_dir = "css"
images_dir = "images"
javascripts_dir = "javascripts"
sourcemap = true
output_style = :compressed

Creating a “.min.css” file With Ruby Compass

At my day job, the standard setup for files was to have a *.scss file, for all the sass stuff, along with a generated *.css file for an uncompressed version of the html, and then finally a *.min.css file that actually had the minified css.  To do this, I added the following bit of code to the end of the config.rb file (http://stackoverflow.com/questions/12404551/can-sass-compass-compile-foo-scss-to-foo-min-css-and-foo-dbg-css). I also made sure to remove the ‘output_style = :compressed’ line from the config.rb file if I had added that previously, just so the *.css file would remain uncompressed (the code below will compress the .min.css file):

require 'fileutils'

on_stylesheet_saved do |file|

  if file.match('.min') == nil

    require 'compass'

    Compass.add_configuration(
        {
            :project_path => File.dirname(File.dirname(file)),
            :sass_dir => File.basename(File.dirname(file)),
            :css_path => File.basename(File.dirname(file)),
            :output_style => :compressed
        },
        'alwaysmin' # A name for the configuration, can be anything you want
    )
    Compass.compiler.compile(File.dirname(file) + "/" + File.basename(file, '.css') + '.scss', File.dirname(file) + "/" + File.basename(file, '.css') + ".min.css")

  end

end