I’ve spoken with several web designers lately that may have heard about the various CSS pre-processors out there (Sass, Less, etc) but aren’t currently using one. There are tons of arguments for which is better, or even if one is necessary/beneficial, but I’ll let you search those out on your own. I personally prefer Sass. I find it fits my development style well, and any time I can avoid dealing with JavaScript libraries I prefer to do so.
Now that I’ve gotten that out of the way, here are some basic instructions for setting up your Mac. I post these because there is lots of good documentation out there on using Sass, but I struggled a while back to figure out how to get Ruby installed on my Mac without causing conflicts with the version already installed and required by the system.
1. Install Ruby
There are lots of ways to do this. The easiest way I found was to use RVM. The instructions on their site are SUPER easy and I’ve never had a problem with them. To save you some trouble, I’m grabbing some basic snippets from their site assuming you want Ruby to get Sass/Compass running and nothing else.
- Open Terminal on your mac
- At the command prompt, copy/paste the code below (from “sudo” onward).
sudo \curl -#L https://get.rvm.io | bash -s stable --autolibs=3 --ruby
- If prompted (you should be), enter the computer’s admin password. If you aren’t sure, use the password for your user account. If that doesn’t work and your company/church owns the computer, you may need to talk with them.
- At the command prompt, copy/paste the code below (from “sudo” onward).
2. Install Sass and Compass
Simply type the following two commands and everything should “just work” =]
sudo gem install sass
sudo gem install compass
If you get any errors, use Google or Bing to troubleshoot. There are usually lots of responses, and I find that Stack Overflow posts typically give great solutions. At this point, the instructions on the Sass web site should get you up and running!