Compile/Watch Sass with Sublime Text 2 when Output Path in previous folder

Question

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.

Just out of curiosity: what does those three dots in "output_path": ".../style.css", mean? — Yan Foto
The config file for Sass Builder starts with "output_path": "/path/to/compiled/css" - the latter part I changed to point towards the css file I want the sass to be compiled out to, as per the guide on Hongkiat but I haven't been able to get the SASS to start watching / compiling — Kompiler

nimmolo nimmolo · Accepted Answer · 2015-03-11T10:26:33

I'm using a similar arrangement to you.

Try this: Instead of Sass Builder (or in addition, i have both installed) download and install the package "SASS Build" by Jaume Fontal.

Then, in Sublime Text 2, Preferences -> Browse Packages, go to the SASS Build package folder and edit the very short build file (SASS.sublime-build) as follows: (note you only have to add the /../ in the first line)

{

"cmd": ["sass", "--update", "$file:${file_path}/../${file_base_name}.css", "--stop-on-error", "--no-cache"],
"selector": "source.sass, source.scss",
"line_regex": "Line ([0-9]+):",

"osx":
{
    "path": "/usr/local/bin:$PATH"
},

"windows":
{
    "shell": "true"
}

}

On my install, it now compiles scss to css in the parent folder.

Compile/Watch Sass with Sublime Text 2 when Output Path in previous folder

4 Answers