Getting started with Sass on Windows, the easy way

“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.”

Made up your mind already and you want to get started with Sass on your Windows PC? Skip the chit-chat and jump to the 5-step section to install it right away.

Or read on…..

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 so simple, you have no idea.

Get Sass up and running

Here’s the only tricky part: you should set up your Sass and STYLESHEETS folders like this, or else it won’t work (unless you change all kinds of config stuff):

Required CSS structure for Sass on Compass.app

(Note: contrary to older versions, and what’s shown in the image above, more recent versions of Compass.app require you to name the SASS folder in lowercase! Hence, sass and not SASS)

Don’t rename the two folders sass and stylesheets and make sure there is at least one file with the extension .SCSS in your Sass folder (it can be your_stylesheet.scss, partyhard.scss, default.scss, anything.scss!) This is what we will call your Sass file.

Every time you save your Sass file, the resulting .CSS file will be placed in the stylesheets folder, so make sure your site points to that folder as the one containing your CSS.

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

Get Compass.app. It’s only $10. Don’t be cheap.
When downloaded, extract it somewhere. It doesn’t even matter where.
Execute compass-app.exe.
A dark grey Compass.app icon should appear in your task bar. Right-click and select Watch a folder.
Select your_website_project (your entire website folder).

BOOM! You. Are. Done.

So what does it do really?

As the name implies, 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!