Get SASS Working in Sublime Text for Windows in 8 Steps

October 3rd, 2013 | Posted in Tools & Efficiency, Tutorials & Guides
Tagged: SASS, Sublime Text

Compile SASS, Sublime Text Windows

Follow these installation instructions to start using SASS with Sublime Text.
Youll be able to save your SASS (.scss) file, and it will compile to a CSS file
automatically. There are a few more extensive guides out there on this, but
they skipped over a few minor things that you may miss. This boils it down to
the essentials that you need to get up and running.
How to Build .scss with Sublime Text:
1. Install Ruby: Download Ruby for Windows. When you run the installer,
choose the option Executable in PATH
2. Install SASS with Ruby: Open your Start menu and type cmd to open a
command prompt. Type gem install sass and press enter. Gem will do its
thing and install.
3. Install Package Manager for Sublime Text: You may already have this
installed if youve been installing other extensions. Follow the installation
instructions on the plugins website.
4. Use Package Manager to Install SASS: This package is for syntax
highlighting. Open the command panel with Ctrl+Shift+P and run Package
Control: Install Package, then type SASS to find the package to install and
press Enter.There probably is a conflict where the syntax highlighter thinks
your files are HAML. Rather than modifying your Ruby highlighting settings as
some articles show, you can do this when you have an .scss/.sass file open:
View -> Syntax -> Open all with current extension as | Sass
5. Use Package Manager to Install SASS Build: This will allow your
SASS/SCSS files to be compiled.
6. (Optional) Use Package Manager to Install SublimeOnSaveBuild: Use
this if you want to compile whenever you save, rather than using the
separate keyboard shortcut for build (Ctrl+B).
7. Restart Sublime Text
8. Save your .scss file, and voila, the corresponding .css file of the same
name will appear in the directory.

Helpful Hints:
Dont want the CSS file to save in the same directory? If you want to
change the default folder that your generated CSS files are saved to, you can
edit the configuration for what Sublime Text calls Build Systems. This
configuration is whats calling the commandline for SASS. Unfortunately there
doesnt appear to be a way to do this on a per-project basis, but you can
change it.Example I used for WordPress: Having style.scss in the folder /sass/
inside your theme folder, this would save style.css in the root.
"cmd": ["sass", "--update", "$file:${file_path}/../${file_base_name}.css"],
You probably dont want your SASS partials to be compiled, if youre using
the SublimeOnSaveBuild. Ive wrote another blog about adding a regex to
stop this.
Package Links:
SASS Textmate Bundle (Highlighting)
SASS Build
SublimeOnSaveBuild
______________________________________________________________________________

I'm new to using SASS and Sublime Text 2 for WordPress development, both
are exactly what I need but I've run into a problem with compiling my SASS
into CSS, which I'm trying to do using the SassBuilder package like it was in
Hongkiat's guide.
The issue could be one of the following config-file using incorrect output-path (seems to be the case to me
personally).
config file location needs to be changed.
my coding SASS could possibly be wrong causing no changes to occur
on the style.css file.
settings wrong with Sublime Text 2.
My files are SCSS and thus will not work with SassBuilder

The Underscores framework stores the style.css file in the root of the theme
folder so
theme/style.css
this is while the sass files are found within a folder in the theme folder so
theme/sass/sassfiles.scss
In my .sassbuilder-config.json file (The file used by SassBuilder to compile
into CSS) I currently have the following code, but I'm unsure whether my
output_path is actually targeting the style.css file which is in the folder above
the .sassbuilder-config file
{
"output_path": ".../style.css",
"options": {
"cache":

true,

"debug":

true,

"line-comments": true,
"line-numbers": true,
"style":

"nested"

}
}

Is this targeting the correct file, if not what would the correct code to make it
do so be? I've done some Googles but keep coming into pathing code for non
related languages.
I could also consider moving the config file but the Hongkiat guide states it
should be in the same folder as the SASS files, from what I've understood.
My code could possibly be wrong, but all I've done so far is just some basic
variables to actually test the compiling and that not working when tested is
why I'm here, I've copy pasted a font weight variable to all relevant files,
individually, in various combinations and altogether even though the import
should have sufficed - but even then it did not update the style.css in any
case.

To get into detail regarding the code I'm trying to apply a font style to all
headings, though one confusing thing is that there are two typography.scss
files to be found with Underscores, though their contents sort of differ.
The SASS variable in theme/sass/variables-site/_typography.scss
$font-header-weight: 800;
Then in headings which if found in theme/sass/typography/_headings.scss
h1,h2,h3,h4,h5,h6 {
font-weight: $font-header-weight;
}

The other _typography.scss file draws variables from the one above so I
presume that adding another variable was the thing to do.
As for Sublime Text 2, I'm new to Sublime Text but I've seen on tutorials and
web articles etc that people are using code to watch but I'm unsure
where/which program I do this with (is it command line?)
I have also followed the guide on the SASS site to get the code running so it
shouldn't be that (using Ruby version 1.9.3-p551)
If the issue is SCSS files and not SASS, how do I compile it then? as I've
looked that up too but am still as confused.
Hope I get some clarity on this soon, stuck at the first step and I just want to
get on and start designing!
To summarize, I just want my SASS to start watching/compiling out to my CSS
file.