For one of my recent projects, I’ve decided to use Stylus. ?I’m accustomed to using Sass but that would require adding Ruby to our stack — Stylus is Node.js-based, and since I’m already using Node.js?for a few other tasks, I thought I’d give Stylus a try. ?Since I’m heavily developing the front-end of the project, I’m either fixing bugs or creating new features, all of which requires heavy CSS edits. ?The problem I’m running into is that I’m forgetting to reprocess stylesheets when I switch branches, so pages start to look funky and I start having heart attacks.
Seeing as my memory is faulty, I’ve been looking for an automated solution to this problem. ?Stylus has a “watch” feature but I’ve found it slow and I’m impatient. ?Next I turned to git hooks. ?I’ve always heard about them but never spent much time with them — big mistake. ?To solve my branch-switching, preprocessor blues, I created a post-checkout hook. ?Bang!
The first step is placing a file called post-checkout (no extension) in the project’s .git/hooks directory:
cd .git/hooks && touch post-checkout
Next up is running my compile script. ?The compile script is an external file (it’s hooked into our build process) so all I need to do is run it:
#!/bin/sh./scripts/compile-scripts
In case you want to see my CSS compile script, here it is:
#! /bin/shBASEDIR=$(dirname $0)CSSDIR=$BASEDIR/../media/redesign/css/if [ ! -d "$CSSDIR" ]; thenmkdir $BASEDIR/../media/redesign/css/fifor file in main print wiki demo-studio profile search zones homedostylus $BASEDIR/../media/redesign/stylus/$file.styl --out $BASEDIR/../media/redesign/css --compressdone
I probably don’t need to tell you how awesome git hooks are, but in the case of instant CSS preprocessing, git hooks are a big help!
Read the full article at: Git Hooks and CSSPreprocessors
