CodeinWP CodeinWP

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

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 on Windows 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 on Windows 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 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:

56 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. Mark Senff says:

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

      Anyone serious about computer science should appreciate command line.

      • Patrick says:

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

        • Duolin says:

          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.

          • James Rosemary says:

            If that’s true, why did they invent the GUI?
            Computers should be easy to use. No one who wants to be productive is going to waste time memorizing arcane line commands with long lists of parameters for hundreds of programs, each invented by what the programmer of those programs came up with at the time.
            The GUI is more productive simply by having consistency. If you know a key combination, it’s the same combination in all the programs.

      • Patrick says:

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

        Great website too, very clear.

  3. Kobe says:

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

  4. Din_rocks says:

    Thanks for a solid setup guide..

  5. Akshay says:

    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. zack263 says:

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

  7. sonu goyal says:

    thank you for installing sass

  8. Igrach says:

    Is this the same method for setting up Compas?

  9. ethanlai says:

    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. hub says:

    Thanks.

  11. Subash Pathak says:

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

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

  13. Kyle Skrinak says:

    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.

  14. Ryan says:

    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.

  15. Mark says:

    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.

  16. Mark says:

    I fixed it! Ya

    It’s all good now.. :)

  17. Rahul says:

    Please share standard deployment model used ?

  18. Alex says:

    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?

  19. sujit saud says:

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

  20. Heath says:

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

  21. Jen says:

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

  22. kurtis says:

    Thank you for this!

  23. John says:

    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?

    • I’m not sure. Are you editing the right file, the one you’ve set it to ‘watch’? Are you in the right directory? What happens when you stop it and start watching again?

  24. J Khalaf says:

    Thanks! This was easy to follow and it worked!

    Much appreciated.

  25. Dave L says:

    Thanks for the tutorial. I currently have a couple web sites that I’d like to monitor the .scss files automatically when I boot my machine. Is there a way to automatically have ruby/Sass monitor a specific set of files at boot without having to run the command line each time I work on a particular site?

    • Hmmm, I don’t know. I think the only way that’s possible is if you have a native Sass app like CodeKit that runs on startup and then automatically starts watching. But I haven’t tried CodeKit so I don’t know if that one specifically would have that ability.

      Also, I’m sure there is a way to auto-run the terminal on startup with a specific watch command, but I’m no expert in that area, so you’d have to search around for a solution.

  26. Sajed Shaikh says:

    Thanks for this article. I was struggling on how to setup SASS. I got the idea after reading this article.

  27. Thank you for your article. It was really helpful. What is the best website to learn SASS?

  28. Jan says:

    Great post, this worked for me.Thanks.

  29. Yusuf Patel says:

    fully useful for starter

  30. Jeff W says:

    Yes, but how do you just compile a scss file ONE TIME? So many tutorials son how to watch scss using the command line,… how do you do a one time compilation?

  31. riccardo says:

    WOW sass is really op, now i use it all time

  32. Javier Martín says:

    Thanks for the tutorial! It was useful

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).