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.
- compass clean
- 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.
- git add (filename)
- git commit -m “Resolved CSS conflict”
- git push
And that’s it! Just two simple commands and you can clear those pesky CSS conflicts with ease.