Setting Up Sass on Windows

There’s a ton of information floating around on preprocessors nowadays. Most of that info is geared towards Mac users, so in this post I’m providing a very simple guide to help Windows-based developers get up and running quickly with Sass (my preprocessor of choice).

This article is filed under the CSS Basics category on this blog, but any developers who already use Sass on Windows can add their feedback, too.

Overall, Sass is not difficult at all to get set up, even if you’re doing it on the command-line. But if you have no interest in going through all these steps, but still want to use Sass on Windows, well, just skip to the final heading in this post for a list of apps that let you start using Sass on Windows with minimal setup.

1. Install Ruby

Because Sass is a Ruby gem, the first thing you need to do is install Ruby using the Windows installer. Unlike OS X, Ruby is not installed by default on Windows, so Windows users need to install it manually.

When you go through the installation wizard, you’ll come to this options screen:

From what I can tell, the only option that you need to check on that one is the middle option, which helps your command-line instructions recognize where to find (as it says) “Ruby executables”. Otherwise, you’ll get the error message “ruby is not recognized as an internal or external command” when you try to install Sass in the command prompt (see next step).

If anyone has any other pertinent info on this particular aspect of the setup, then please comment and I’ll update accordingly. But that should be enough for the first step.

2. Install Sass Using the Command Prompt

Now that you have Ruby installed, you’ll be able to install Sass. To do this, open the command prompt by doing one of the following:

Start–>Run, then type “cmd”; or

Start–>All Programs–>Accessories, then choose “Command Prompt”

Once the command prompt is open, install Sass by typing the following in the prompt:

gem install sass

Then hit “enter”, and wait for Sass to be installed. It should look like this when done:

If you want to have the added benefit of Compass, which is an authoring framework that uses Sass, you can instead choose to do “gem install compass”, which will install both Compass and Sass at the same time. I won’t get into the details on Compass here, but you can Google around for some info on that once you’ve started using Sass.

3. Set Up a Sass File

Now that Ruby and Sass are installed, you want to tell Sass what file you’re working on and let it compile your CSS from your Sass file.

In the command prompt, navigate to the folder where you’re going to write your CSS using Sass syntax. This is not a tutorial on command-line syntax, so you’ll have to figure that out on your own if you’ve never done it. You can check out this link or just do a Google search for tutorials on simple command-line expressions.

Here’s how my prompt looked after I navigated to my folder:

Notice that I’ve navigated using the “cd” or “change directory” command to locate the folder I’m working in.

Now, using Windows Explorer, go into that folder and create a new CSS file with the extension “.scss”. So instead of the usual “.css” extension, you’re simply adding an “s” to the front of the extension. You can do this by either creating a regular CSS file and changing the extension, or by creating a blank text file and changing the .txt extension to .scss.

4. Tell Sass to “watch” the File

Once your file exists, you want to tell Sass to keep an eye on it for changes, so it can compile it into a regular CSS file with traditional CSS syntax.

In the command prompt, inside the folder where your .scss file exists, type the following then hit enter:

sass --watch styles.scss:styles.css

You can copy the above code and paste it into the prompt by right-clicking and choosing “paste” (ctrl-V won’t work there). Ensure that “styles.scss” matches the file name that you chose when you created your new .scss file, and the same for the resulting .css file. Don’t worry that the .css file doesn’t exist yet; Sass will create it automatically.

Once you’ve used the correct command as shown above, you should see this in the command prompt:

As you can see, Sass is now ‘watching’ your .scss file for changes. To stop the watching, just hit ctrl-C in the prompt.

5. Write Some Sass and Let it Compile

Using any text editor, open your .scss file and throw some Sass in there. This article is not about Sass syntax (there’s tons of stuff online for that, and I’ll probably cover something in the future), but here’s an example you can copy and paste, taken from the Sass website (use the “view plain” link to get a clean copy of the code without line numbers):

After pasting that into your text editor, just save your .scss file then go back to the command prompt. You should see something like the following:

Notice that Sass has automatically detected the changes to the file and has produced a new file in the same folder. In that folder, you’ll see that new file, called “styles.css” (or whatever you named your .scss file). Open that new file in your text editor to see the compiled CSS.

Using the example above, you should see the output appear as follows (there might be a slight variation in curly brace placement or spacing):

Now you can continue to write Sass-based code in your .scss file and Sass will keep detecting those changes and overwriting your CSS file every time you save the original file.

Of course, keep in mind that in your HTML file, when you reference your CSS, you’ll point to your regular .css file. The .scss file is just for your editing, and doesn’t get used directly in any web pages.

Skip Everything Above and Use an App!

If using the command prompt still bothers you (and it really shouldn’t, as the above instructions are pretty simple), then you can try out one of the following apps:

Originally, this post had a reference to Scout App, but that app has not been updated for more than 2 years and development on it has stopped. As far as I know, it’s quite buggy and shouldn’t be used. Use one of the above instead.

Thanks. I was going to include a mention of Compass.app, but figured someone would comment on it, and I didn’t want to make the post any longer than it already was. I’ll mention it in the upcoming Scout post though.

I’ll definitely have to check it out. It’s really not expensive at all.

Not sure if I’m the exception, but I absolutely loathe command line stuff. With that in mind, my personal opinion is that Compass.app is the best solution for Windows users (I also tried Scout but a “common” Java error kept me from continuing — a popular solution for that error did not help).

Anyone serious about being serious about productivity should again appreciate command line. You can work much much faster in CLI than in GUI. Depends on the GUI, though, but as a general rule, customizing workflow in CLI is way easier than doing it in GUI.

While installing sass from cmd ( ‘gem install sass’) , its showing the errror – ‘Could not find a valid gem ‘sass’=0> in any repository’ and ‘While executing gem … (Gem::RemoteFetcher::FetchError).
What could be the problem ?? I have installed the Ruby Windows Installer.

Thanks for the scout reference; checking it out. I love the command line, so much so I studiously AVOID windows cmd.exe. Installing/maintaining ruby on Windows is its own special endeavor, for that matter.

1. I used source.css and source.scss ( instead of style.css )
2. The command line was a breeze, no problem.
3. Pointed the path to the right files: c:\Users\Mark>cd ../../xampp/htdocs/meaphotos/wp-content/themes/mantra-child/css>sass –watch source.scss:source.css
4. Entered your sass code in my scss file
5. My css file remains blank. Command line reads “overwrite source.css”. This is where I need help
NOTE:
I’m using Windows. I’m using Dreamweaver CS5.5. I have already configured the documenttype files to read scss and it works.

Thanks for the easy to follow instructions! If it were not for these, who knows how long it would have taken me to figure out why I was getting the “ruby is not recognized as an internal or external command” message :).

I followed the tutorial but when I try updating the .scss file, there are no updates to the command prompt. It just says ‘Sass is watching for changes. Press Ctrl + C to stop.” What do you think is wrong?

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.