So after switching back from Brackets to Sublime because Brackets didn't manage large compressed files (crash). I missed the cool SASS Build feature, which was very easy in Brackets. There are of course great plugins like this one in combination of this one and this. The last plugin is optional. It's building your files on save. In combination with the intern sublime option "save_on_focus_lost": true everything is working like magic. The problem is if you have partials in your SASS project what you definitely should. And even more a folder structure for specific scss files. My structure is for example: * css style.min.css *scss style.scss

-- base 
---- _base.scss
---- _foundation.scss
---- _layout.scss
---- _normalize.scss
---- _typo.scss
---- _variables.scss
-- components 
---- _content.scss
---- _header.scss
---- _nav.scss
---- _footer.scss

So out of the box it's compiling your file you edited. Even underscored scss files. The style.scss and the style.min.css are untouched. I want to edit / save a partial scss file -> it will be imported to style.scss and build to style.min.css. After searching around and come across this and this attempts, I figured out how you can get it right. The only permission is that you have one main scss file which importing all the partials. I find this way very comfortable. My style.scss looks like this: @import "base/normalize"; @import "base/foundation"; @import "base/base"; @import "base/layout"; @import "base/typo"; @import "components/header"; @import "components/nav"; @import "components/content"; @import "components/footer"; In Sublime 3 you can't edit .sublime files easily anymore. For that I recommend that plugin. So after installation all the mentioned plugins press STRG+P and search for Open Resource. Go to SASS Build and choose the normal build or compressed file. Now the magic line is this one:

"cmd": ["sass", "--update", "${file_path}\..\style.scss:${project_path}..\..\css\style.min.css", "--stop-on-error", "--no-cache", "--style", "compressed"],

The SASS Builder build your actual file into style.scss and outputs it to your .css file. Unfortunately it's hard coded but hey, it's working. Before you can build partials around make sure your main scss file which is importing the partials is ready. When you build your main scss with the cmd above it will generate a css folder in ../../. That's it. Hope it was useful for you.

Edit: Do yourself a favor and work with gulp :)

Nächster Beitrag Vorheriger Beitrag