.NET Daily

How to install Sass and Compass on Windows

Introduction

Carmen

Carmen


LATEST POSTS

How to keep a button disabled until the page is loaded 03rd May, 2016

Little things that make a big difference in Javascript 24th January, 2016

Tutorials

How to install Sass and Compass on Windows

Posted on .

The first thing you need to know here is that Sass and Compass get installed as Ruby gems, so before doing anything else you need to have Ruby installed on your machine.

To install Ruby on Windows you can just download the latest version of Ruby Installer and follow the guidance of the installation wizard.

At this point you should have something like this:

Ruby Path Example

Next, you need to download your sass and compass gems. You can do that by going to the Ruby Gems Website. First search for sass and download it, then do the same thing for compass.

! Note: Make sure that you download the gems in the same folder where you installed Ruby, otherwise you will have troubles installing them. In my case this folder is C:\Ruby21-x64\bin.

So now that we have the gems, lets install them.

Open your Command Prompt or PowerShell and let’s first check if Ruby is installed correctly.
To do this you need to go to the folder where you have Ruby and check for the current Ruby version. In my case this is how it will look like:

$ cd C:\Ruby21-x64\bin
$ ruby -v

Ruby Version Example

Next I will install Sass:

$ gem install sass

Sass Install Example

You will soon see the message that your installation was successful as well as some information about the Sass version you just installed. If later on you want to check what version of Sass you have installed, you can run the command:

$ sass -v

Sass Version Example

Now we will follow the same steps for installing Compas:

$ gem install compass

Compass Install Example

If you want to check the version of you compass, you can run a similar command that we used for sass and ruby:

$ compass -v

Compass Version Example

Awesome! Now you are good to go.

Troubleshooting

Lets also check some error cases, assuming that something might go wrong.

Issue no. 1

Instead of getting an installation successful message, we receive an error like this:

Compass Error Example 1

As you can see here I got an error saying that I have some dependencies that I need to resolve before installing compass. In this case it seams that my version of compass requires the rb-inotify gem in version 0.9 or later.

If this happens to you, do not panic!
Go to the Ruby Gems site and search for Compass again. In the right side of the gem you will see some information about the dependencies of Compass.

Compass Dependencies Example

This means that in order for Compass to be installed, some other gems need to be installed first. So go ahead and download these gems (you can skip sass, we already installed it).

! Note: Make sure that you download the gems in the same folder where you saved the other ones (same folder where you installed Ruby), otherwise you will have troubles installing them. In my case this folder is C:\Ruby21-x64\bin.

If you think that there are too many dependencies and maybe you don’t need all these gems, you can just install the gem that was required in your error. But trust me, if you get a similar error, then most likely you don’t have the rest of the gems either (except the case that you played with gems before and installed some of them). So if you add them one at a time, chances are that you might end up with something like this:

Compass Dependencies Error Example

So my recommdation is to check the depencencies list and just download them all at once in your folder.
Here is a list of the gems that are usually required:

  • Chunky_png
  • Compass (already downloaded at a previous step)
  • Compass-core
  • Compass-import-once
  • Ffi
  • Fssm
  • Multi_json
  • Rb-fsevent
  • Rb-inotify
  • Sass (already downloaded at a previous step)

Now that we have all the gems in place, lets try to install compass again;

$ gem install compass

Compass Install Example 2

Issue no. 2

Lets check another case, because what could happen is to get again an error, like so:

Compass Error Example 2

This means that some build tools are required as well, in this case you need to download and install the DevKit. You can it from the same Ruby Installer site. Make sure you get the proper version that goes for your Ruby version you have installed. Since I installed Ruby 2.1.5 and I have an OS x64 bits, I will go ahead and get the DevKit-mingw64-64-4.7.2.

To install the DevKit you need to open the Command Prompt or PowerShell again and go the folder where you have downloaded the DevKit (in my case that folder is C:\DevKit). Next you need to init and install the dk.rb file.

$ cd C:\DevKit
$ ruby dk.rb init
$ ruby dk.rb install

DevKit Install Example

Now that the DevKit is installed, lets go back to our Ruby folder and try to install compass again:

$ cd C:\Ruby21-x64\bin
$ gem install compass

Compass Success Example 3

Wrap Up

To wrap-up, we will see a couple more commands that will help you “watch” your sass files for any changes and compile them into css.

$ cd <my_project>
$ compass watch

To create a new project you can run:

$ compass create <myproject>

For more details you can check the Install section of the Compass site here.

Carmen

Carmen

There are no comments.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

View Comments (0) ...
Navigation