Resolving CSS Git conflicts when using Sass/SCSS the easy way

When using Sass/SCSS and working in multiple developer environments with a source control system like Git, it is very common to get conflicts with the compiled CSS files.

This is because when more than one developer is compiling CSS from SCSS files, the same CSS file is being recreated for each developer separately and often the same line is effected, even if both developers are working on different SCSS files.

This seems to particularly effect the Sass map file. Sass source maps allow you to inspect elements in your browser and see the Sass/SCSS file and line. Without Sass map, you will end up seeing just the compiled CSS, which makes if difficult to find the raw Sass when debugging.

But it doesn’t have to be a painful experience each and every time you get a conflict in the CSS files. With just two simple commands, you can clear the conflict and go about your day. This assumes you are using Compass to compile SCSS into CSS.

The two simple compass commands that save the day

The first command removes the compiled CSS files and the second re-compiles them.

  1. compass clean
  2. compass compile

Compass clean will delete the compiled CSS files so that they no longer exist in your local file system. Compass compile will then generate them again, complete with both yours and the other developers changes.

Resolving the git conflict

With your CSS and CSS map now clean, you can resolve the conflict. You can use your Git GUI to do this if you have one, or you can run git add and the filename. Now commit your changes and you are done.

  1. git add (filename)
  2. git commit -m “Resolved CSS conflict”
  3. git push

And that’s it! Just two simple commands and you can clear those pesky CSS conflicts with ease.

Enjoy this article?

Get my best content on Javascript, CSS, PHP & Git before anyone else and special bonuses.

Get started

Comments

Good tutorial.

I often use "compass watch --force". This will force a recompile and then watch for changes.

Blair Wadman's picture

Hi Ivan, nice one, one less command!

Add new comment