Using Codekit Hooks To Get Around A Libsass Issue

Recently, I ran into a problem with libsass and loud comments. As some of you know I am working on building WordPress themes. At its bare minimum, a theme has a stylesheet with a comment at the top and a functions php file. I am using SCSS for styles and libsass to compile it.

While libsass does almost everything the regular sass command does, there are some things that are missing. Loud comments are one of the things that are broken right now.

I happen to use Codekit as well. Codekit watches a directory and then does what it needs to do to result in nice clean code. If there is anything Codekit doesn’t know about, you can run an extra command using a hook.

So I have Codekit take a style.scss file and compile it to style.css in the same subdirectory. Then I have a hook that watches for style.scss and runs the following shell script:

This super simple script concatenates template_about.scss and style.css into a single new file. Note that the new file is in a new location. When I had it adding the text to the same file, Codekit looped forever.

The result of this is I get a SASS compile far faster than what the standard command provides and I automatically get a file that works for WordPress. Woohoo!!!