Carwin Young

home

Avoiding Git Conflicts Involving Compiled SASS

23 Jan 2013

The front-end community has, in recent months, lovingly embraced the use of CSS pre-processing applications in an effort to reduce some of the pain involved with writing and maintaining large projects. Frustratingly, the process hasn't been all cake and ponies for myself or my project teammates while using git.

Have you figured out how to make them play nice together? It's fine if you haven't. After all, it took me a few weeks before I started using my noodle and a timely tweet from @JohnAlbin confirmed my tiny epiphany and launched me into a blissful state of few and far between git conflicts.

##So what's the problem?

The premise for this theoretical, though entirely probable, situation is that you are on the front-end team for a fairly large project. Lets say you're all writing enough SASS for each of you to be generating hundreds of lines of compiled CSS every few hours. Now throw something like Compass into the mix, and just for kicks imagine that each of you have slightly different methods of compiling. (Sean uses Codekit, I'm just doing compass watch --debug-info).

The last assumption we'll make is that you and your teammates are kick-ass developers who make lots of commits and document your work thoroughly.

So with this imaginary team workflow, <!-- more --> the most annoying issue (although not the only one), is that when you've been working in your local repository for a while, and you're ready to push to your remote branch, the output generated by your compilation method differs significantly from that of your co-workers. You now need to pull their updates down, before you can push up. Uh oh! Git conflicts ahoy!

##Git conflicts

If you get stuck in git conflict world, there's no real reason to panic (if the conflicts are related to compiled SASS) -- just drop either theirs or yours and move on. The "problem" is really more of an annoyance. Having to wade through 40 commits during a pull, all of which yell at you about these CSS files being in conflict, gets really old. Father-time old. You may start imagining that your monitor has wrinkles.

Alright, gimme the answer jerk

Consider this portion the TLDR; of this post.

The answer is to checkout the version of the compiled CSS as it is in HEAD. Commit your SASS (.scss/.sass) files as usual, but don't git pull. Instead you want to pull and rebase in one go. After that, you can compile anew, then add the freshly recompiled CSS to staging. Lastly - amend your last commit so that your newly compiled stylesheets git added to it. Huzzah!

Here's that same paragraph in Hold-My-Hand format:

  1. git add some-sass.scss
  2. git commit -m "A helpful and descriptive message."
  3. git checkout -- compiled-css.css (this one checks out the desired file from HEAD)
  4. git pull --rebase
  5. compass watch / sass watch scss:css / some gui stuff (whatever)
  6. git add compiled-css.css
  7. git commit --amend
  8. git push remote branch

We have at our fingertips two fantastic applications capabale of really powerful things -- both applications have changed a lot about the way I work and the way I think about front-end development in general. Git has taught me to both be reckless and meticulous, SASS has taught me to proceed with caution in every selector nesting. Some days I hate them, most days I love them. Maybe this will help you love them more often too.

For more about rebasing, look here