CoffeeScript and Sass without Rails

Rails 3.1 integrates CoffeeScript and Sass out of the box via the new asset pipeline. Which is super! Unfortunately I don’t work on Rails all the time. Most of our client projects are running swimmingly on Expression Engine.

To gain a better understanding of the new meta-languages shipping with Rails I decided to integrate them with my daily workflow (as best I can). The process was easier than expected.

After installing everything with Homebrew I have the sass and coffee command line tools, meaning I can now convert sexy syntax’d files into regular css and js.

Note: I had to add my Homebrew gem path to my PATH variable to get sass working:

/usr/local/Cellar/ruby/1.9.2-p180/bin

With this setup I created two extra folders in my assets directory named css-sass and js-coffeescript to hold my Sass and CoffeeScript files respectively. Now, while working on projects all I need to do is use Terminal to watch these directories and have it compile sass and coffeescript files each time I save them. Here’s how to do it.

Watch and compile your Sass files

In your assets directory in Terminal run the following:

sass --watch css-sass:css

Whereby css-sass is your working sass directory, and css is the directory to compile the regular css files to.

Bonus: If you want to compress the compiled css file, pass extra arguments like so:

sass --watch css-sass:css --style compressed

There are plenty more options available.

Watch and compile your CoffeeScript files

In a new Terminal tab, in your assets directory run the following:

coffee -c -o js --watch js-coffeescript

Whereby js-coffeescript is your working CoffeeScript directory and js is the directory to compile the files to.

Happy meta scripting!