Are you supposed to put *.css files into git when they're generated from *.scss?

Question

I started using sass scss stylesheets. These generate *.css files from *.scss files. My question is, which files do you check into version control? Right now I check in both main.scss and the generated main.css. I wonder though if there is a way to just check in the *.scss file and to ensure that the *.css files get generated on deployment.

Answer 1

I prefer to check them in. We deploy to our staging and production environments from git and I prefer not to rely on yet another tool/compilation when deploying to production. This way, its absolutely clear what is being pushed out.

Answer 2

In general, you usually don't need to check generated files into source control. As long as your code generation works consistently, and you use it consistently to update your target .css files, I don't think you would need to put them in source control.

That said, the suggestion to not put generated files into source control is usually intended more for binary files (i.e. libs or executables generated from a build). The main reason for this is that binary files cannot be easily diffed/merged, so if multiple people try to checkin changes to the same binary, you may end up with merging issues that cannot be easily resolved. Since you're dealing with plain text css files, I don't think it's that big of a deal to just put them in source control too, just so you have a backup of the actual target file.

Answer 3

I like to borrow from the conventions used by server side developers when handling compiled front-end code like sass. I keep all of my source separate from compiled code. Here's how I set it up:

Put your source in a src directory, under main/language-name, in this case:

/path-to-my-app/src/main/sass/my-syntactically-awesome-file.scss

Then put tests in an identical test directory (you shouldn't need any tests for sass, though:

/path-to-my-app/src/test/sass/my-syntactically-awesome-test.whatever

Then put your compiled code in a publish-ready directory, like so:

/path-to-my-app/publish/css/my-syntactically-awesome-file.css

Then commit the whole shebang (!)

You can make sure you are always putting your css in the right place like so:

$ cd /path-to-my-app
$ sass --watch src/main/sass/*.scss:publish/css/

Now you're a mother effing programmer, baby!