How to use CodeKit Hooks to Copy Sass and CSS Files

If you don’t know about CodeKit, it’s a local development Mac tool which auto-refreshes your local site every time a file is saved. You can also look at your local sites on any device that is connected to your network with CodeKit. Among many other features, it also compiles Sass and Less files.

When I’m doing WordPress web development, often times, I create a local WordPress site, and I save the theme (or child theme) in a Dropbox directory. Because I’m paying for the Dropbox space, and because plugin and core files are updated so frequently, I save the full local WordPress site outside of my Dropbox folder (e.g. a subfolder of Documents).

This means that I have 2 copies of a local site’s theme files. Before I learned about the solution that I’m going to tell you about, every time I saved a Sass or CSS file on a local WordPress site, I would have to copy those saved files to the corresponding directory in Dropbox, also. I wanted to automate copying the these files to Dropbox.

After emailing Bryan Jones (CodeKit’s creator) about my dilemma, he told me about CodeKit’s hooks. Using CodeKit’s hooks requires a little understanding of command line functions. Luckily, I understand the basics of using the command line (i.e. cp, mkdir, rm, ls, etc). You also need to understand how to use CodeKit’s two special environment variables, $CK_INPUT_PATH and $CK_OUTPUT_PATH.

On CodeKit, I set my local site’s Sass and CSS files to be in the same directory like so:

Creating Hooks in CodeKit

1. Go to Project Settings -> Hooks.
2. Click the Add a New Hook button.
3. Name your hook.
4. Make sure Shell Script (/bin/sh) is selected from the dropdown menu.
5. Select Filename, ends with, and type in scss to target Sass files.
6. Use the cp command and CodeKit’s environment variables to copy the Sass and CSS files.

$CK_INPUT_PATH and $CK_OUTPUT_PATH are the whole input and output filepaths including the file name(s). In this case, they are the Sass and CSS files. If any of the directories in the input or output paths have spaces in them, you will have to add double quotes to them like so:

cp "$CK_INPUT_PATH" /path/to/your/outside/directory
cp "$CK_OUTPUT_PATH" /path/to/your/outside/directory

Adding double quotes would also apply to your outside directory paths if they have spaces in them.

Now, every time I save my Sass file, a new CSS file is compiled and it gets copied to the outside directory that I specified.

Thanks for reading my post. If you have any questions about how to do this, feel free to leave a comment below.