Sass on Windows with Scout App

This is a follow-up post to my previous article, posted yesterday, that discussed how to get up and running with Sass on Windows. At the end of that post I introduced an alternative to all the command-line based instructions.

So here I’ll quickly cover that alternative — Scout App, a free Mac and Windows-based native app produced and maintained by developers at Mutually Human.

Installing Scout

As the previous tutorial pointed out, if you install Sass via the command line, you’ll have to do it manually after you install Ruby. But with Scout, you don’t need to do any of that. Scout runs Sass and Compass in a self-contained Ruby environment, making it dead simple to get started with proprocessing.

To install Scout, just download it and follow the installation instructions. Generally speaking, Scout is a bit of a slow app (more on that later). For example, when you install it, you might see a delay on this screen during the installation wizard:

Scout App installing

I suppose that could vary from system to system, but I noticed it did take a little long considering it’s only a 17MB install file.

The Scout App Interface

After Scout is installed, the application will launch, and the super-minimalist interface will load.

Scout's UI

Admittedly, when I first saw the UI, I was puzzled as to what to do. There’s no file menu, no apparent buttons. The only option at this point is the little plus sign in the bottom-left corner. If you click that, this will pull up a native OS window to allow you to select a folder:

Adding a folder in Scout

Using this option, navigate to your project’s folder and add it to Scout.

Configuring a Project

After adding one or more project folders, you should see something like the following:

Projects Added to Scout

In my example, I’ve added two different projects. Notice a couple of things in addition to the projects listed in the left pane:

Options for Managing Projects in Scout

The selected project is highlighted in blue and each project has a full screen of configuration options. You also have a little VCR-style “play” button next to each project name.

Folders and Output Options

Before I explain what the “play” button is for, let’s look at the config options that help to set up an individual project:

Scout's project configuration settings

The only two options here that are mandatory are the first two fields, which are where you choose the path to the folder for your project’s CSS file, along with an output folder (I’m using the same folder for both).

Lower down in the config options, we’re able to select the output mode for our CSS. First, you can choose the “Environment”, which is either “Development” or “Production”. Then you can choose the style of output, which is one of “Nested”, “Expanded”, “Compact”, or “Compressed”.

Generally you should always choose “Compressed” for the output, since you want your end-result code to be as minimal as possible. I won’t explain what each of these options do, but they’re pretty straightforward and you can fiddle with them to see the differences in the different output styles.

Create Your .scss File

Once you’ve selected the input and output folders, and chosen the output options, now you need to create your Sass file. Just create a text file and change the file extension to “.scss” or use an existing CSS file and change its extension to “.scss”.

You don’t have to create a blank corresponding “.css” file if you don’t want to. As when using Sass on the command prompt, Scout will automatically create the output file for you.

Watching a File For Changes

Finally, to get things ready for our CSS file to be output, just click the “play” button next to the project you’re working on, and Scout will automatically start “polling for changes” and it will switch over to the “log” view to show you what’s happening:

Scout polling for changes

After you press the “play” button, it turns to a “stop” button, allowing you to stop watching the file any time. To go back to the configuration options, click the “configure” button near the top-right corner to return to the options screen. Although the log says “Press Ctrl-C to Stop”, this doesn’t seem to work in Scout. It looks like the log is just mimicking what the command-line would be spitting out.

Write Some Sass and Let it Compile

When you’ve started “watching” your file for changes, just throw some Sass into your .scss file, save the file, and Sass will detect the changes and log the results:

Scout logging the changes

And that’s basically it. Open up the .css file if you want to see the results. If you have the .css file open in your text editor while making changes, you’ll get a notification to update the file inside your editor each time you save your changes. Naturally, you would only have your .scss file open when working on a real project, as the output file is the one you’ll use for production.

Scout has a few other options, but the ones I’ve discussed here will get you up and running and ready to start preprocessing in no time. And the best part is that you don’t need to manually install Ruby and Compass/Sass or touch the command line at all.

Problems With Scout

Scout is a free app, and is not yet at version 1, so is either in Alpha or Beta (the site doesn’t seem to label it). I’m using version 0.6.2 which you can download from the downloads page on GitHub, but the version that’s available on the main site is actually version 0.5.

There are quite a few open issues on the GitHub repo, so it does have its bugs.

A couple of things I’ve noticed:

It’s really slow and choppy on Windows and I’ve heard at least one person comment that large files compile slow, too (I haven’t tried anything large yet)

It seems that with some installs that already have Ruby and Sass/Compass installed, the output modes will change randomly; I experienced this myself, and fixed it by uninstalling Scout, Ruby and Sass/Compass, then installing Scout alone

And as the issues list shows, there are other bugs and feature requests in the works.