Question

I took on a project where the CSS was created via SASS. At the time I wasn’t familiar with SASS and began manually updating the last output file. My manager has learned that I haven’t been using SASS and is insisting that I change everything I’ve done (lots of additions and tweaks) into SASS and begin using that again with the project.

Is there any tool that can help me do this? I was thinking maybe generate the last file and look at the difference between that and my currently-edited file and try to add those rules to the SASS file, but I don’t know of any tool that will take two files and show you the differences.

Thanks

Answer 1

First of all you need to identify how the css file you were working on is. Note that all the comments on sass done via // are ignored of output in nested mode. And if the css file you got is in production mode, all the comments are stripped and the css file is minified, which is bad for a conversion.

What I advise is that you backup the css file you’re working with; then run sass watch into the directory that has the config.rb, which will regenerate the css file based on the original sass project.

After that, grab the two files and use a Diff Tool, if you don’t want to use a difftool locally you can always create a public GitHub repository and place the original css file, and then commit the new one, to view the differences.

Once you do this, you should go into the files baseed on the compiled selectors, and add the missing attributes.

With that you’re pretty much done, in a way that you can keep the comments and original intended structure.