First steps with Sass and Compass

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.

If you’r on Windows, you can run the Ruby Installer. On Linux, Rails Ready gives you essentials. On OS X, Ruby is already installed by default so Ruby just works.

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.

Installing Sass

Ok, let’s install Sass! Open the Terminal and type:

Windows:

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:

  • Scout (cross-platform) from Mutually Human.
  • Compass.app (Windows/Linux/ Mac OS X) from Handlino.

CSS Parser

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

or

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.

compass watch

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 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s