Setting Up Sass on Windows

Setting Up Sass on WindowsThere’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 reference to an app that lets 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:

Install Ruby

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:

Install Sass in the command prompt

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:

Navigate in the prompt

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:

Tell Sass to watch your file

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):

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
    border-color: $blue;
    color:
        darken($blue, 9%);
}

.border {
    padding: $margin / 2;
    margin: $margin / 2;
    border-color: $blue;
}

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:

Sass detects changes, compiles to CSS

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):

.content-navigation {
  border-color: #3bbfce;
  color: #2ca2af;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

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 Scout App!

If using the command prompt still bothers you (and it really shouldn’t, as the above instructions are pretty simple), then you can install Scout App, touted as “Compass and Sass without the hassle”.

Scout App

The great thing about Scout app is that it runs in a “self-contained Ruby environment”, so you don’t have to install anything other than Scout to get up and running with Sass on Windows. Scout is pretty simple to use, and probably doesn’t need a lot of explanation, but I will cover Scout in another “CSS Basics” post later this week.

Advertise Here

41 Responses

  1. There’s also Compass.app (http://compass.handlino.com/), which I use for writing SASS. It’s not free ($ 10,-) but I think it’s totally worth it.

    • 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.

  2. 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).

    Check out my findings/tutorial/etc. on http://www.senff.com/front-end/coding-tips/getting-started-with-sass-on-windows-the-easy-way/

    • Jerome:

      Anyone serious about computer science should appreciate command line.

      • Patrick:

        And anyone serious about productivity and progress should appreciate GUI’s.

        • Duolin:

          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.

      • Patrick:

        Thanks a lot for this article, it helped me out.

        Great website too, very clear.

  3. Kobe:

    Hi, does the Compass.app include live-reload capabilities? If not, is there a stable Windows app that does?

  4. Din_rocks:

    Thanks for a solid setup guide..

  5. Akshay:

    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.

  6. Awesome tutorial!!! Short and to the point! I am now a Sass Ninja!!

  7. sonu goyal:

    thank you for installing sass

  8. Igrach:

    Is this the same method for setting up Compas?

    • Yes, see the last paragraph of step 2 in the article above. It mentions there that you can choose to do “gem install compass”, which adds Compass and Sass both at once.

  9. I like compile sass and compass width GUI. There is a greate gui for sass – koala(http://koala-app.com). Out of the box, and cross-platform operation.And it’s open-source.

  10. Subash Pathak:

    Or just use Prepros App http://alphapixels.com/prepros which compiles less, sass, scss, jade, haml, stylus and markdown with Live Browser Refresh.

  11. When I type “gem install sass” I get:

    ‘gem’ is not recognized as an internal or external command, operable program or batch file.

    I checked the Add Ruby Executables during installation.

    Any idea what might be going on?

    Cheers -

    george

  12. 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.

  13. Ryan:

    Thanks for this. Been wanting to try out SCSS for a while now and haven’t, until today, come across a good, clear setup for it.

  14. Mark:

    I need a little help.

    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.

  15. Mark:

    I fixed it! Ya

    It’s all good now.. :)

    • What was the problem? Maybe your answer will help someone else.

      • Mark:

        I believe it was a glitch in Dreamweaver. That same day I was having the problem, a pop up window appeared reading “I need an update for Dreamweaver”. Ugh!

        Have a great day.

  16. Rahul:

    Please share standard deployment model used ?

  17. Alex:

    So command prompt has to be open at all times? Once I close it, it stops updating the changes from .scss to .css
    Is there a way to close it and still have it run in the background?

    • AFAIK, you can do it if you use a tool like CodeKit, which does the command-line stuff in the background for you.

      Is there some reason you want to close the command prompt? Can’t you just minimize it?

  18. sujit saud:

    thenx…. i got it..!!!!

  19. Heath:

    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 :).

  20. Jen:

    Hi There
    For Windows 7 64 bit should I use version 1.9.3 or a higher version of ruby?

  21. Thank you for this!

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.