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 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:
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 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:
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:
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.
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/
Anyone serious about computer science should appreciate command line.
And anyone serious about productivity and progress should appreciate GUI’s.
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.
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.
Thanks a lot for this article, it helped me out.
Great website too, very clear.
Hi, does the Compass.app include live-reload capabilities? If not, is there a stable Windows app that does?
I’m not too sure about that, but the tool LiveReload does have a Windows pre-alpha version:
http://livereload.com/
Compass.app does have LiveReload capabilities, it works great with the browser extensions: http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-
Similar article, might be relevant:
http://sickdesigner.com/sass-for-designers/
Thanks for a solid setup guide..
This post is really helpful
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.
I’m not sure.
See if one of these links helps:
http://www.manning-sandbox.com/message.jspa?messageID=113051
https://groups.google.com/forum/?fromgroups=#!topic/rubyonrails-talk/gqyGlZ0ql-M
If anyone else has this issue, go to where you installed Ruby and find the “Start Command Prompt with Ruby” and then install from there.
Awesome tutorial!!! Short and to the point! I am now a Sass Ninja!!
thank you for installing sass
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.
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.
Thanks a lot, I like this app.
Thanks.
Or just use Prepros App http://alphapixels.com/prepros which compiles less, sass, scss, jade, haml, stylus and markdown with Live Browser Refresh.
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
Hmmmm… maybe try the suggestion in this thread:
http://stackoverflow.com/questions/9852259/ruby-exe-is-not-recognized-as-an-internal-or-external-command-in-windows-7
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.
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.
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.
I fixed it! Ya
It’s all good now.. :)
What was the problem? Maybe your answer will help someone else.
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.
Please share standard deployment model used ?
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?
Thanks for the reply, ill check it out.
thenx…. i got it..!!!!
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 :).
Hi There
For Windows 7 64 bit should I use version 1.9.3 or a higher version of ruby?
Use whatever is the latest version for Windows. Don’t pay attention to what’s in the screenshots in this post, this is an old post.
Thank you for this!
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?
Thanks! This was easy to follow and it worked!
Much appreciated.
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.
Thanks for this article. I was struggling on how to setup SASS. I got the idea after reading this article.
Thank you for your article. It was really helpful. What is the best website to learn SASS?
I highly recommend Jump Start Sass. Best Sass beginners book on the market.
Great post, this worked for me.Thanks.
fully useful for starter
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?
Well, I suppose you could just add the “watch” command once you’re done all your edits and make a minor edit to get it compiled just once.
Also, there are tools you can use to compile, like Sassmeister.
WOW sass is really op, now i use it all time
Thanks for the tutorial! It was useful