So, you heard about Sass, Compass, or both. Great! Now what?
In this tutorial i’ll take you through the first steps of getting started with Sass and Compass. I’ll talk about installation, creating your first project and compile the first lines of Sass to CSS. So let’s get started.
Installing Sass and Compass
To start, Sass and Compass runs on Ruby, so you’ll need to have Ruby installed on your machine.
Getting Ruby to work is beyond the scope of this article, so, i’ll leave it out from this article. If you need help with that, send me a comment or talk with me in facebook.
Ok, let’s install Sass! Open the Terminal and type:
gem install compass
Linus / OS X:
sudo gem install compass
For the Linux and OS X people, depending on your setup, you may or may not need to install gems using sudo. For example, if you are using a RVM, you won’t need to install gems using sudo.
I just said that we were going to install Sass, but i gave you the command to install Compass. The truth is, Compass requires Sass, and when you run the command to install Compass, it will automatically install Sass for you and you will see something like this:
$ sudo gem install compass Fetching: sass-version.gem (100%) Fetching: compass-version.3 (100%) Successfully installed sass-version Successfully installed chunky_png-version Successfully installed fssm-version Successfully installed compass-version 4 gems installed
In this tutorial, i’ll keep the command line usage, but, if you are intimidated by the command line, there are two GUI apps for Sass/Compass that you can use for your Sass projects management:
Another good thing to have around is CSS Parser, it outputs a report that gives you a count of the Sass rules, properties, mixing defined and mixing used, as well as the CSS rules and properties that get output from your Sass-stylesheets.
To install it, runs his command:
gem install css_parser
sudo gem install css_parser
Depending or your operative system.
We are all set, time to start the action!
Create a test project
Sometimes, the best way to start with something new, is to jump right in. Go to a folder on your system where you would like to store your project and run this command:
compass create sass-project
If you look into the folder, you will see that some files were created. There are two main folders, Sass and Stylesheets.
- The Sass folder contains the Scss files, the Sass files.
- The Stylesheets folder, will contain the compiled CSS from Sass.
Compiling Sass to CSS
This is the easiest part. Sass and Compass does all the work for you, you just need to run this command inside your project folder, and let them do their thing.
You should see something like this, if everything is going well:
>>> Compass is polling for changes. Press Ctrl-C to stop.
If this is case, then, you’r all set. Congratulations, you can now start writing your Scss!
Let me know what you think of Sass, thanks for reading and don’t forget to share 🙂