scss builder for cloud9 web editor

Question

Hey there :) I'm trying to figure out how I can make a scss builder for cloud9. I could only find something for less here on stackoverflow.

I'm trying to get main.scss in my scss folder to be compiled into main.css in a css folder at the same level.

The builder:

{
    "caption" : "SCSS",
    "cmd": ["scss", "$file", "-x", "${file/\\.scss/\\.css/}"],
    "selector": "source.scss"
}

Error:

OptionParser::InvalidOption: invalid option: -x
Use --trace for backtrace.

Answer 1

I think the way you're using the Cloud9 builder is correct, however, I couldn't find the -x option within scss. Here's what scss -h gives me:

Usage: scss [options] [INPUT] [OUTPUT]

Description:
  Converts SCSS or Sass files to CSS.

Common Options:
    -I, --load-path PATH             Specify a Sass import path.
    -r, --require LIB                Require a Ruby library before running Sass.
        --compass                    Make Compass imports available and load project configuration.
    -t, --style NAME                 Output style. Can be nested (default), compact, compressed, or expanded.
    -?, -h, --help                   Show this help message.
    -v, --version                    Print the Sass version.

Watching and Updating:
        --watch                      Watch files or directories for changes.
                                     The location of the generated CSS can be set using a colon:
                                       scss --watch input.scss:output.css
                                       scss --watch input-dir:output-dir
        --poll                       Check for file changes manually, rather than relying on the OS.
                                     Only meaningful for --watch.
        --update                     Compile files or directories to CSS.
                                     Locations are set like --watch.
    -f, --force                      Recompile every Sass file, even if the CSS file is newer.
                                     Only meaningful for --update.
        --stop-on-error              If a file fails to compile, exit immediately.
                                     Only meaningful for --watch and --update.

Input and Output:
        --sass                       Use the indented Sass syntax.
        --sourcemap=TYPE             How to link generated output to the source files.
                                       auto (default): relative paths where possible, file URIs elsewhere
                                       file: always absolute file URIs
                                       inline: include the source text in the sourcemap
                                       none: no sourcemaps
    -s, --stdin                      Read input from standard input instead of an input file.
                                     This is the default if no input file is specified.
    -E, --default-encoding ENCODING  Specify the default encoding for input files.
        --unix-newlines              Use Unix-style newlines in written files.
                                     Always true on Unix.
    -g, --debug-info                 Emit output that can be used by the FireSass Firebug plugin.
    -l, --line-numbers               Emit comments in the generated CSS indicating the corresponding source line.
        --line-comments

Miscellaneous:
    -i, --interactive                Run an interactive SassScript shell.
    -c, --check                      Just check syntax, don't evaluate.
        --precision NUMBER_OF_DIGITS How many digits of precision to use when outputting decimal numbers.
                                     Defaults to 5.
        --cache-location PATH        The path to save parsed Sass files. Defaults to .sass-cache.
    -C, --no-cache                   Don't cache parsed Sass files.
        --trace                      Show a full Ruby stack trace on error.
    -q, --quiet                      Silence warnings and status messages during compilation.

Here's something that should work for you:

{
  "cmd" : ["scss", "$file", "$file_path/../css/$file_base_name.css"],
  "info" : "Building $file_path/$file_name",
  "selector": "source.scss"
}

Where $file is the full path, $file_path is the directory path, and $file_base_name is the name of your file without the extension. You can take a look at the other variables available to you here.