If you are a web developer you have probably heard a lot of buzz in the development community regarding SASS (Syntactically Awesome StyleSheets), but what is it? SASS is an extension of CSS3 that adds a whole lot of new features to the CSS that we all know and love. SASS, in conjunction with Compass (the program that compiles the SASS code into regular CSS), allows you as the developer to add nested rules, mixins (essentially CSS functions), variables and much more to your stylesheet as you code it; making things much easier for both the developer and designer. Sounds great, right? It is. SASS is everything that I have always wished CSS could be; however, getting started with SASS can be quite a pain.
There are countless tutorials online for setting up SASS and Compass on your machine whether you are using OS X or Windows; however, none of them quite take you from install to starting a new SASS project (which is more than just starting a new .scss file) all in one place. In this tutorial we will cover the entire process from SASS/Compass install to creating a new SASS project for both Windows and OS X users.
SASS and Compass are both Ruby gems, which means that you must have Ruby installed on your machine before you continue with this tutorial. If you are using a Mac, Ruby is already pre-installed on your machine and you can jump right in to installing SASS and Compass. If you are using a Windows PC click here to install Ruby.
Once Ruby is up and running on your machine, open up the terminal if you are using a Mac and the command prompt if you are using Windows. Don’t panic, the terminal is your friend. From here, the installation process is exactly the same for both Windows and OS X users.
Step one: Install SASS
Type the command: sudo gem install sass
You should get a message confirming that SASS is installed.
Step two: Install Compass
Type the command: sudo gem install compass
You should get a message confirming that Compass is installed.
That’s it! You have just installed SASS and Compass. Compass is the program that is used to manage your SASS projects, as well as compile them into CSS. Now let’s create a new SASS project using Compass. Once again open up either terminal or command prompt and get ready to type some commands.
Type in:
1. First create a new project:
a. compass create /path/to/project
i. This will be the path to the project folder that you wish to create, for example: /users/user/sass_project_name. Once this is done you should see a folder generated in the specified path. It is beneficial to create a project in this way so it will be easier for Compass to find and compile your .scss into .css.
2. Next tell Compass to watch your newly created project for changes:
a. cd /path/to/project
b. compass watch
i. You should now get a message stating that “Compass is polling for changes” in your project. This means that every time you make a change to your .scss files, Compass will automatically compile the code into .css each time you save a change. This step must be repeated each time you begin working on your .scss files.
You are now fully set up to begin using SASS on your machine. To begin learning the SASS commands and syntax here is a great a reference.