SassMeister vs BeautifyTools vs CSS 2 SASS OnlineCompilers

If you are anything like me you enjoy open source, free, and non-committal applications for development. Sure there are times when we have to purchase software licenses and even times when it really benefits us. I’m thinking here about WordPress themes and Visual Studio Professional. For things like editing simple markup, or writing syntactically awesome stylesheets (Sass), I prefer simple, non-committal online editors. I don’t want the authors to know my Facebook friends or have my phone number.

I’ve found three for when you need online Sass editor. To keep things fair I will be using the same snippet of Sass in each editor to see how they perform.

Here is that example

/*plain*/
$primaryColor: #eeffcc;

body {
    background: $primaryColor;
}
/*mixin*/
@mixin linx ($link, $visit, $hover, $active) {
  a {
    color: $link;
    &:visited {
      color: $visit;
    }
  }
}
@include linx(white, blue, green, red);

/*arguments*/
@mixin headline ($color, $size) {
  color: $color;
  font-size: $size;
}

h1 {
  @include headline(green, 12px);
}

The three editors I have picked are: CSS 2 SASS/CSS Converter, VS BeautifyTools.com, VS SassMeister Online Sass Compilers.

Beautify Tools Sass Compiler

SassMeister

CSS 2 SASS/SCSS

Designed by Jose Pablo Barrantes, who’s personal site doesn’t seem to work. This is a ruby application with the option of compiling into SASS or SCSS as the title implies.  Of the three this one was the most problematic.

Issues with this particular compiler:

Cannot handle using the ‘$’ for variables

Can’t compile the background-color attribute

I am sure there are a ton of other issues with this compiler and it doesn’t appear to be actively managed, so I would avoid CSS 2 SASS/SCSS. The inability to compile some pretty basic SASS knocked this one of the recommendation list and I didn’t even make it to the mixins. Another weird problem was the inability to handle comments. Yeah, having a comment in the Sass generated the ‘Dude’ error.

BeautfiyTools.com Sass Compiler

This editor was definitely better than CSS 2 SASS/SCSS, adding the options of loading files from URL or uploading them and even a minification action. The creator even took the extra step to add a download button for the finished product, instead of just leaving you to copy and paste your code. I think that is a nice touch.

With the positives laid out, here are the negatives. BeautifyTools.com was able to handle the ‘$’ in front of variables and it could process the background-color attritube that our first editor could not, but still spacing destroyed this editor.

I don’t think it is too crazy to expect not to work within a minified file. I mean in the end, yes I want it minified. While I am working, let me lay things out nice and clear to see better.

If you have the patience to work only with minified files, then this editor may work for you, and it was able to handle mixins. For me though, this compiler is knocked out of the running also. Removing and avoiding all spaces is simply too much of a headache.

SassMeister

Of the three this is the editor with it all. SassMeister allows you to switch themeing like you would in Gmail or WordPress, offers over 50 ready to use plugins and even lets you choose 4 ways to output your finalized CSS (nested, compact, compressed, expanded). Of the three, SassMeister is also the only online compiler that I tested that was able to handle variables, mixins, and even regular spacing.

Conclusion

If you are looking for a good online compiler for Sass, SassMeister is a great option. The best part for me, is that SassMeister doesn’t require you sign your soul over to access your files and can actually compile Sass without forcing me to minify my file first. No doubt you may come across other options, I myself have seen probably twenty others that appeared promising, except with the caveat to provide identifying information so that they can add you to a mailing list or to ad networks. No thanks.

 

A Web Developer by trade, find me on Github A motorcycle enthusiast at heart. Most days I'd rather be in the woods anywhere.