IMPORTANT NOTE (JANUARY 2014): the following article is somewhat out of date. Although Compass.App (the solution proposed in the article) is far from obsolete and still works for Sass on Windows, I now recommend a relatively new dev tool called Prepros.

Prepros is a very worthy Windows alternative to Mac’s Codekit and serves all your preprocessing and live reloading needs.

I considered rewriting this article and focus on Prepros, but considering the tool has been available for about a year now, that would be a little silly. There are some good tutorials for it online already. I’ll keep it short instead and simply say that if you want to run Sass on Windows without all that confusing command line stuff, get Prepros.

Original article follows:

I wanna try that Sass thing. But that Ruby stuff and command line is confusing! Also, I’m on Windows! I’m doomed to fail.

If that’s you, this may be for you! You can either jump to the 5-step section to install right away, or keep reading for some more backgrounds and details.

Background

Currently super hot in web development: CSS preprocessors. With a preprocessor, you will write your CSS somewhat differently (shortened code, if you will), some software will convert it to “real” CSS and that’s it: lots of time saved, and your CSS file ends up being a lot more structured and efficient.

There are two main preprocessors to choose from Sass and LESS. Although I would encourage everyone to make a choice for themselves, I personally prefer Sass. You probably don’t need convincing to use a preprocessor (let alone use to a specific one).

The fact that you’re on this page, already tells me you want to use Sass on Windows, and it’s possible that you gave up before you even tried because it looked too much hassle to set it up and get it running. It’s what threw me back a number of times.

But wait, Windows?!

Most developers seem to prefer working on Macs. I’ve tried it myself, but for some reason after a year I decided to go back to Windows. Also, lots of people have a PC in the workplace and are stuck with it (even though I work at a super hip agency, it’s an all-PC environment. Then again, it’s Quebec, where a Front-end Developer is still called a Web Integrator, so who knows!). And, as much as I love Windows myself, it sometimes comes with a particular set of challenges.

Mainly: a lot of great development software is only available for Mac. Here’s a perfect example: watch Chris Coyer’s screencast on preprocessors and it’s almost guaranteed that you want to use CodeKit immediately.

But you guessed it: CodeKit does not have a Windows version. Now what? Don’t give up. Sass is still within reach.

The quest

Sometimes the wrong things can put you off. The first few times I looked into Sass, I didn’t even get to the installation procedure because the instructions told me to install Ruby and type all kinds of things on the command line. Ugh! There’s a reason why MS-DOS is history and the world is run by OS’es that have pretty windows, boxes, and buttons. I’m sure Ruby is great, but I bet there are easier ways too.

All I wanted is have a setup on my Windows PC where I would write Sass code and have that automatically compiled into proper CSS.

After trying left and right (and definitely, I did consider giving up and just go back to Mac), I finally found a Windows solution that looks pretty damn perfect to me, and that I will recommend to every Windows user who wants to get started with Sass without any hassle): Compass.app.

Let’s get on with it, here’s how to do it. It’s really simple.

Get Sass up and running

Here’s the only tricky part: out of the box, you should set up your sass/stylesheets folders like this, or else it won’t work (unless you change all kinds of config stuff, but let’s keep it light):

Required CSS structure for Sass on Compass.app

So, make sure that:

  • you have a folder called “sass” that includes at least one file with the extension .SCSS, and
  • you have a folder called “stylesheets“, which is where your resulting CSS will end up

Hard part’s over already! Let’s finish it up:

  1. Get Compass.app. It’s only $10, and totally worth it.
  2. When downloaded, extract it somewhere. It doesn’t even matter where.
  3. Execute compass-app.exe.
  4. A dark grey Compass.app icon should appear in your task bar. Right-click and select Watch a folder.
  5. Select Your Website Project (the parent folder to the “sass” and “stylesheets” folders).

BOOM! You. Are. Done.

So what does it do really?

As the name implies in step 4 above, Compass.app is, well, watching your folder. Every time you save your Sass file (in this example, /sass/your-stylesheet.scss), Compass.app will notice it has changed, compile it into proper CSS and save it to /stylesheets/your-stylesheet.css. And that’s really what Sass is all about.

Try adding the following lines in your SCSS file and save it:

$blood: #ff0000;
.horror { 
   color: $blood; 
}

Now look in your stylesheets folder and open the file your_stylesheet.css. Your Sass code has been beautifully compiled into nice, clean CSS:

.horror {
   color: red; 
}

See? You didn’t even need to type something silly like:

watch your_stylesheet.scss -n "party" 1138 V /burger

…or something during any single point in the process to get these results. It all happened automatically once you hit the SAVE button.

And that’s it already! It’s all set up now and you’re ready to dive into Sass on your fancy PC!

Advanced bonus feature: FREE mixins

Obviously, that’s not all there is to Sass or Compass. Many things to explore, investigate and discover. However, one thing I want to mention specifically: the mixins that ship with Compass.

Once you’re all into Sass and you have embraced the power of mixins, you can use some of these mixins that are already written for you. No need to write your own mixins for cross-browser rounded corners, box-shading, and so on; they are part of the Compass framework. In other words…..

This would be a perfectly good way of creating a new mixin for box shadows:

@mixin myShadow($x, $y, $b, $c) {
    -webkit-box-shadow: $x $y $b $c;
       -moz-box-shadow: $x $y $b $c;
        -ms-box-shadow: $x $y $b $c;
         -o-box-shadow: $x $y $b $c;
            box-shadow: $x $y $b $c;
}

.module {
    @include myShadow(10px, 10px, 0, black);
}

And it will be compiled into:

.module {
  -webkit-box-shadow: 10px 10px 0 black;
     -moz-box-shadow: 10px 10px 0 black;
      -ms-box-shadow: 10px 10px 0 black;
       -o-box-shadow: 10px 10px 0 black;
          box-shadow: 10px 10px 0 black; 
}

BUT WAIT! In Compass (and Compass.app), this type of mixin is already included, so you don’t have to create a new mixin for this type of thing. All you have to do is load the library and call it the proper way:

@import "compass/css3";
.module {
    @include box-shadow(10px 10px 0 black);
}

You’ll end up with even cleaner CSS, because Compass knows which vendor prefixes are not even necessary anymore:

.module {
    -webkit-box-shadow: 10px 10px 0 black;
       -moz-box-shadow: 10px 10px 0 black;
            box-shadow: 10px 10px 0 black; 
}

Genius.

Lots more

Obviously, this article just focuses on how to get your Sass going on Windows, and that’s where I want to stop; too much additional information in a short time could be overwhelming or confusing. Of course, there is lots more to Sass, and there’s a whole lot more to Compass and Compass.app. Auto-installation of included frameworks is just one of them.

Mac developers often have LiveReload installed to have their browser automatically (and transparently) refresh the page as soon as changes in the code are detected. Unfortunately, I have not found a proper Windows alternative (but keep in mind that this is not an essential tool for Sass development).

Hopefully with this article, the two biggest hurdles (Ruby/command line installation, and Windows software availability) are overcome and any reason to not go ahead with Sass on Windows environment are hereby eliminated. Compass.app has two very, very important features: it works, and it’s easy to setup/use.

Happy Sassing!