If you work with Sass in Sublime Text 2 you will no doubt have added the ‘SASS Build‘ Plugin to your IDE. Its great, it compiles Sass files into css when you run a SASS build (ctrl+B). You will probably have added the SublimeOnSaveBuild plugin too, if not then do it now, its okay, I’ll wait…. With this and SASS Build together you don’t even need to run a build to compile Sass, you just need to run the save command (ctrl+s).
However, whether you use just ‘SASS build’, or both, there are a couple of little things that were bugging the heck out of me in terms of how it can be used.
If you just have SASS Build installed you need to remember to keep selecting the Sass file you want compiled (i.e. clicking on the file) and run the Build command every time you want that compiled css file updated.
If you happen to have a different sass file currently selected it will compile that one instead, or if you have a non-sass file selected it will throw an error and nothing will happen (Don’t say you’ve never done it!).
If you have both plugins installed then its basically the same issues, except instead of having to build the currently selected element to compile it you can just save it. As I said, the same issues as above apply, you need to have the file you want compiled selected.
This happens because SASS Build uses the file paths of the files that are currently selected as the location of where to save the compiled css to.
"cmd": ["sass", "--update", "$file:${file_path}/${file_base_name}.css", "--stop-on-error", "--no-cache"],
The creator of SASS Build also offers an alternative command where you would be able to specify the location to save the css files to.
"cmd": ["sass", "--update", "$file:${file_path}/../css/${file_base_name}.css"],
However, he doesn’t specify how you can choose which scss files to compile. If you use either of the above methods it will compile only scss files that are currently selected and built. It will not compile the one you may need to be compiled, i.e. the parent/master sass file, into which all the others feed into and is the only one you really need compiled.
So, in both of the above scenarios what you are left with after you do your builds are potentially multiple css files, one for each sass file you happen to have selected during your saves/builds, most of which are redundant, and quite possibly no css file for the actual sass file you need compiled. So what you end up doing is deleting all those css files, going to the sass file that you actually need compiled and running a build or save on that one. Meanwhile you have been debugging some issue for the last half an hour not realising the css file specified in your html has not been recompiled because you forgot to select it when building.
I know I know, having to select the Sass file you need compiled is not a big deal, I’m sure most of you get by just fine as is. Indeed many of you might prefer to have it that way instead of using the solution I have come up with.
For me however, as I have outlined above, there are a couple of little things that I feel could be improved, at least for me and the way I do things.
They are:
1. To be able to compile Sass files without having to have them selected before building
2. Be able to compile multiple Sass files at once (less important but useful on some occassions)
In modern web development you are more than likely only going to want to compile a single sass file, maybe two, to add to your html pages, and this file will not necessarily be altered or saved very often. In fact, I almost never alter/select my parent/master sass file once I have it set up. I tend to do all my work in the child sass files that feed into it. My parent sass file imports other sass files, that’s its only job.
So whats my solution? We can actually fix all these issues with one simple change:
Navigate to C:\Users\…\AppData\Roaming\Sublime Text 2\Packages\SASS Build, open up the SASS.sublime-build file, and replace the default cmd command with this:
"cmd": ["sass", "--update", "${project_path}\\sass\\styles.scss:${project_path}\\css\\styles.css", "--stop-on-error", "--no-cache"],
I’m basically explicitly telling Sublime to always compile just one particular sass file every time I do a build, regardless of whether I have that file selected or not. I also explicitly set the css file to which it compiles.
Note, my parent sass file in this instance is called ‘styles.scss’ saved in the root of my ‘sass’ folder which is in the root of the project folder. I am setting my compiled css file to be ‘styles.css’ to be saved in root of the ‘css’ folder also in the root of the project folder. You can of course alter to compile/create whatever files you want with whatever names you want. If you need multiple sass files compiled on build then just add another cmd command below that one and so on.
That’s essentially it. Now every time you do a build (or a Save if you also have SublimeOnSaveBuild installed), regardless of what file you currently have selected, it will compile the correct sass file into the correct css file. No more having to select and no more forgetting to select more importantly.
As I said SASS Build is a brilliant plug-in and I would be lost without it, many of you will prefer the way in which it currently works, but for me, I found the above a useful hack. Either way, if you haven’t downloaded it yet, do so now!
Happy Coding!
DK