Standalone SCSS compiler for SASS in Sublime Text 2

Update:  get the better package implementation from the followup post.

I recently discovered the Sublime Text editor, and it seems pretty neat, even though you kinda have to manually code a lot of stuff.

I also love SASS/SCSS, and was excited that there are so many plugins for SASS in Sublime Text.  However, they all assume you have Ruby and Sass (or Compass, whatever) already installed.  I was expecting something more like the OrangeBits compiler for WebMatrix, or even Mindscape Web Workbench for Visual Studio, where it installed everything for you.

Well, I didn’t want to install Ruby just so I could get the Sass gem, so I looked around for a command-line Sass compiler — and I just could not find one.  The closest I got was finding the SassAndCoffee library (which also appears to be what’s used in the OrangeBits compiler), so I emailed the developer, and then seconds later I found this discussion on his project github (I’m still learning how that works).  Turns out I’m a) not the only one interested, and b) it shouldn’t be too hard to write it myself.

Voila – https://github.com/zaus/Sassifier (or the standalone executable: Sassifier-v1p2-addin.7z – download and rename extension)

Update: some minor new features, customizable autogenerated “prefix”, see Github for commits.

I’m using it in conjunction with Nathos’ Sublime plugin for SASS, which seemed leanest and had the best syntax highlighting.  Either unzip the standalone executable to the plugin’s folder (in my portable version, \Programs\Sublime Text 2.0.1 x64\Data\Packages\Sass) so that you have a “Sassifier” folder and a “SASS (Windows).sublime-build” file in the SASS plugin folder, or compile it yourself from github and grab the builder from the zip archive.

For reference, the build command is:

{
    "cmd": ["Sassifier.exe", "$file"],
    "working_dir": "$packages/SASS/Sassifier",
    "selector": "source.sass"
}

Now you can write .scss files and it should autocompile when you save (or manually build with F7). You can force “compress” mode as well.

26 thoughts on “Standalone SCSS compiler for SASS in Sublime Text 2

  1. sorry if i ask a stupid question … i’m new to this …

    Installed this (standalone) to sublime text 2.
    Build system SASS (Windows) shows up in build system menu, so i guess it is installed properly.

    I’ve written a test.scss file and saved it (locally). Hitting the build command makes sublime text to “building” for 1-2 seconds in the status bar, then this disappears again – but i don’t get any output (neither as file, nor as something within sublime text.
    Am i missing something obvious?

  2. Not a stupid question at all — I’m new to Sublime as well.

    Are you using a SASS plugin as well, or did you just manually add the build command (through the menu option Tools > Build System > New Build System)?

    What do you see in the Sublime console? CTRL+`.

    I get something like:
    Building file [C:\path\to\style.scss]
    as uncompressed
    with dependencies []
    SASS Compiled to [C:\path\to\style.css]
    [Finished in 14.4s]

    This is what you should see if it worked correctly. If it didn’t, there should be a giant error/exception message instead.

  3. okay, i did a fresh install of everything (whole sublime text 2 with all packages etc.) to avoid any misconfiguration due to my previous attempts …

    Got stuck again, but then found out that one needs to put the sassfier folder from your .7z INSIDE the Sass folder of Nathos’ plugin, not just into the packages folder of Sublime Text.
    With that change, it compiles now – happy day :)
    So thanks for this, it’s exactly what i was looking for, just a “simple” compiler within an text editor without installing Ruby etc.

    By the way, your link to your 7z-package has an additional “.txt” extension attached to the file name by accident(?).

    • I said “package folder” when I meant to say “the plugin’s folder”, so I’ll update the description to make it more clear. Sorry that tripped you up!

      And WP is too smart, in that it won’t let you upload executable files (even inside archives), so you have to trick it with a different extension. I’ll amend that explanation too.

  4. if by any chance you know the answer: is there a way to pass a parameter to the sassifier.exe (need “–debug-info” for firesass, but i don’t know how to pass it or if it is somehow supported)

  5. Pingback: Sassifier Followup – Make SASS compiler it’s own plugin | zaus – an Orange Monks Production

  6. Got it working and that is awesome, but is it just me or does it seem a little slow? I am compiling on nested style and its taking 3 + seconds. Is this because we are not going through the ruby engine, or is there something I am missing?

    • It takes forever for me as well (usually ~5 seconds), and I too chalked it up to “not going through ruby”. I don’t really have anything to compare it to except Mindscape Web Workbench in Visual Studio, which supposedly uses the same base libraries (actually it’s where I took the original compiler) but is a heck of a lot quicker. Sassifier is, as I’ve mentioned in some other comment, just a wrapper that calls the compiler library — I don’t think there’s enough code in Sassifier to create a bottleneck, so I assume it’s one of the other components.

      It’s a bummer though, I agree. If you figure out anything let me know.

  7. hey i followed all the steps for sassifier standalone ,….but when building it shows sassifier stopped working……wat to do…?

    • Does the message tell you more? Usually when it stops working it’s because you have a syntax error in your file that crashes the compiler, and *most* of the time it’ll give you a hint.

  8. is it possible you can add in the ability via the JSON build file to read in an optional parameter to allow for a different output directory? This would be extremely helpful since my scss file is in a different directory than my output CSS file.

    • I assume what you meant was just to add a command-line argument to Sassifier providing the functionality you want, not for Sublime Text to accept arguments (which it does).

      Regarding the functionality you want, I should be able to add what you want around line 46 of Program.cs. I’ll try to get to it soon, but patches are always welcome.

  9. sorry for such a bad code, its my first experience with c# =)
    sorry for my bad english =)

    but here is an example of Sassifier by zaus modified by me for choosing an output file =)

    {
    “cmd”: ["Sassifier.exe", "$file", "../../for/example"],
    “working_dir”: “$packages/Sassifier”,
    “selector”: “source.sass”
    }

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using SassAndCoffee.Ruby.Sass;

    namespace Sassifier {
    class Program {

    ///
    /// Creates a standalone wrapper executable for the library.
    /// See also https://github.com/xpaulbettsx/SassAndCoffee/issues/44
    ///
    /// path, iscompressed, list of dependencies (;)
    static void Main(string[] args) {
    Console.OutputEncoding = System.Text.Encoding.UTF8;
    // make sure we have enough args
    if (args == null || 0 == args.Count())
    {
    throw new ArgumentNullException(“You must provide at least a file path to compile”);
    }

    // get the args and defaults
    string path = args[0];
    string outPath = args[1];

    bool compressed = (args.Count() > 2 ? Convert.ToBoolean(args[1]) : false);
    string[] dependencies = (args.Count() > 3 ? args[2].Split(‘;’) : new string[]{} );

    Console.WriteLine(“in [{0}]“, path);
    Console.WriteLine(“dependencies [{0}]“, string.Join(“, “, dependencies));

    // use the compiler
    using (var compiler = new SassCompiler()) {
    var compiled = compiler.Compile(path, compressed, dependencies.ToList());

    string destination = Path.GetDirectoryName(path) + Path.DirectorySeparatorChar;
    string desTmp;
    string[] outPathTmp = outPath.Split(‘/’);
    for (var i = 0; i < outPathTmp.Length; i++) {
    desTmp = null;
    if (outPathTmp[i] == "..")
    {
    destination = string.Format("{0}"
    , System.IO.Directory.GetParent(Path.GetDirectoryName(destination)) );
    }
    else {
    desTmp = string.Format("{0}"
    , outPathTmp[i] );
    }
    destination += desTmp + Path.DirectorySeparatorChar;
    }

    //write to file
    destination = string.Format("{0}{1}.css"
    , destination
    , Path.GetFileNameWithoutExtension(path)
    );

    File.WriteAllText(destination, compiled);
    Console.WriteLine("out [{0}] {1}", destination, compressed ? "c" : "u");
    }
    }
    }
    }

  10. Pingback: Sublime Text 2 のPortable版でSASSをスタンドアローンで使う | きじとら

  11. Hi, the plugin won’t work for me :(

    the error sais:
    [Error 2] Das System kann die angegebene Datei nicht finden (the system can’t find the specified file)
    [cmd: [u'Sassifier.exe', u'H:\\Desktop\\Sonstiges\\web\\niro\\scss\\bootstrap.scss']]
    [dir: H:\Desktop\Tickets\Tools\Sublime Text 2.0.2 x64\Data\Packages\SASS\Sassifier]
    [path: C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\QuickTime\QTSystem\]
    [Finished]

    Any ideas? Maybe because I have a windows pc without admin rights?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>