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:
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.
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:
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:
In my example, I’ve added two different projects. Notice a couple of things in addition to the projects listed in the left pane:
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:
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:
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:
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.
Use Compass.app for $10
Many people seem to be recommending Compass.app, which is available for a very reasonable $10.
I haven’t tried it yet, but I’m going to purchase it soon and do a write-up on it in a future post.
Lastly, if anyone has any feedback on using Scout for bigger projects, please comment.
I’ve been using Scout exclusively for a while now, and besides some small issues, I think it is great. I’m curious what you think of Compass.app. Personally I find it a horror, a total waste of money.
Wow, really? Even for just $10? As I mention at the end of the article, I haven’t tried Compass.app yet, but I was intending to give it a shot.
Anything specific you didn’t like about it, in comparison to Scout?
Its very slow and I have to agree, and its not very intuitive. Sometimes you wound’t see the Play button and you wonder where the hell did it go. The best compiler I’ve ever used is “Codekit” itself, Its super fast, cheap, auto-refreshes all the files and gives your F5 button some rest. But they only have the Mac version of it yet. Then “Prepros” is there, it has a sleek and intuitive interface, and yeah. its pretty fast. But sometimes the compilation doesn’t seem to work. Don’t know if that’s the problem with my computer.
If you can’t get any of those mentioned above and feels like the life has no meaning, just go ahead with the Command prompt. It works!
Try out the new Koala it works great and interface is fine above all its free. Give it a try already I started liking it
Compass.app is definitely better. I’m using it instead of the command line and it works like a charm.
Hey Louis I’m wondering if, using Scount, there’s a way to disable the line comments from showing up in the css output? Right now they are there in all of the output forms except compressed. Have you tinkered with this yet?
Yes, from what I can see, you can do this by choosing “Production” and choosing “Expanded”. This keeps it readable and doesn’t have the line comments.
I know you’re supposed to keep it at “development” for actual development, but I don’t see any practical difference between dev and production other than the comments, so I say do that.
Perfect, that looks a lot better. Thank you, Luis, those line comments make sense for development of large CSS files, but it really does clutter up the file.
*Louis, typo.
I’m Windows 7 (64bit) user. I’m also using Compass.app from last 5 months. It’s great and $10 is not a big deal and 30% amount goes to http://www.umdf.org/site/c.8qKOJ0MvF7LUG/b.7929671/k.BDF0/Home.htm. I also bought Sublime Text 2. Compass.app has some more shortcuts and facilities and developer are upgrading, improving constantly https://github.com/handlino/CompassApp/wiki/CHANGELOG
And I also got http://fireapp.handlino.com/ free from compass.app team which worth $14. and has some more features.
I installed and used Scout app today. It’s having old version of Sass and Compass. If you want new features either use Compass.app or install Ruby and Compass manually
This post is exactly what I needed. I do see what you mean by a bit “buggy”, but I can handle the freezing for now via a free app. I think I will try compass in the future. Has there been any new apps made recently that might be better than compass?
Hi Louis,
I cannot get Scout to compile Compass goodies like
@mixins, @extends and @includes, but it will compile Sass just fine. When I originally installed Scout there were a few Adobe AIR alerts (not sure I remember why). I’ve had a few other friends say the same and the others just bailed ship entirely because the installation process was too frustrating.Any ideas why I’m not getting Compass to compile with Scout?
BTW :: Windows7 :)
I’m not sure why that would happen. Maybe you should file a bug report here and see what the Scout devs say:
https://github.com/mhs/scout-app/issues
Meantime, if I get some time, I’ll do some experimenting and see if I run into the same problem.
So I re-installed the application once more and Boom! Worked finally. Yay! No Adobe AIR alerts this time. Just wanted to follow up and go on record as this problem being fixed.
Hey can you tell me if you did something else besides reinstalling it because I am having the same problem!
And since its been awhile already since you posted this comment what are you using now!
I can’t speak for Dennis, but maybe try Prepros:
http://alphapixels.com/prepros/
Or Koala:
http://koala-app.com/
It doesn’t seem like Scout app is very well maintained. The GitHub repo hasn’t had an update in at least a year.
Thanks for the Scout intro. Could you perhaps expand it a bit to explain how to set default folders and use config files, as the configure GUI does not currrently work.
I’m not sure what you mean when you say “the configure GUI does not currently work”. It seems to work fine for me. When you select a folder or file in the “configure” area, you have to use the “Choose” button, then navigate to the folder you want to choose. If you then close Scout and reopen it, whatever folders you choose should still be there. But if you just type the file path name, it doesn’t seem to save it that way, so maybe that’s your problem…?
You should see something like this when you open your program and select a project:
http://gyazo.com/e6a95bb9e8f42a53af5b4f558a11e127.png?1354341074
You can download Prepros App for windows. Prepros can compile less, sass, coffeescript, stylus, haml, markdown. It can also live refresh your browser.
I’ve just tried Prepos, and have got to say it really is far better than scout. The UI has a nice clean design. Unlike Scout the program is quick, compiling seems to be faster too, AND it has popup notifications when compiling fails! Oh how badly I’ve wanted that feature from scout!
Another plus point is that I can point it to a root directory and the program scans all files/folders for files that can be compiled. I previously had an issue where I’d have a dev site and a production site, both with the same internal folder names, just a different root folder name, so in scout the two directories where I had the scss files showed up with the same name. So it’s nice to be able to have the root folder as the project name.
All in all, I’m very happy I’ve found Prepos, it works/looks much better and appears to be in active development, again unlike scout, which as of writing this hasn’t been updated for 8 months…
Koala works almost the same way, but it looks waaay better and is easier to use. Definitely worth checking out!
when m press play button in scout it return an error.
then what should i do.error is like that”argument [app:/views/production.html][15:29:41] ArgumentError: Error #3214″ .
and in my project there is no error found.