So your friend, co-worker, web-buddy or whomever told you about Sass, Compass … or both. Great! Now what? In this beginner guide we take you through the first steps of getting started with Sass and Compass. We walk you through installation, creating a test project, compiling your first lines of Sass to CSS, and we even “mixin” a little Sass history.
Install Sass and Compass
Sass and Compass get installed as Ruby gems so you’ll need to have Ruby on your machine.
Getting Ruby in place is beyond the scope of this article, so, if you hit any snags hit up the mailing list if you need help finding the right resources for getting Ruby on your machine.
Ok, let’s install Sass! Open up your Terminal.app and type:
gem install compass
Linux / OS X:
sudo gem install compass
For Linux and OS X folks, depending on your setup, you may or may not need to install gems under the
sudo user. For example, if you are using RVM, you won’t need to install your gems under the
Ok, I know what you’re thinking. I just said that we are going to install Sass, but I just told you to install Compass based on that directive. The truth is, Compass requires Sass and when you run that command you should see something like this:
$ sudo gem install compass Fetching: sass-3.1.3.gem (100%) Fetching: compass-0.11.3.gem (100%) Successfully installed sass-3.1.3 Successfully installed chunky_png-1.2.0 Successfully installed fssm-0.2.7 Successfully installed compass-0.11.3 4 gems installed
If that’s not what you saw when you ran that command, you may not have Ruby or Ruby Gems on your machine. Covering this in detail is a bit beyond where I want to go in this post, so seek help at the mailing list if you encounter any issues.
Also, there are 2 GUI apps for Sass/Compass, but we’ll be assuming command-line usage for this guide.
I also like to install css_parser to take advantage of all the features of
compass stats which outputs statistics of my Sass stylesheets. It outputs a report that gives a count of the Sass rules, properties, mixins defined and mixins used as well as the CSS rules and properties that get output from your Sass-stylesheets.
Run this command to install
gem install css_parser
Now you are ready for some hardcore Sass and Compass action!
Create a test project
The easiest way to get started with something new is to just jump right in. On that note. Head to the place you store you codes (or where ever you’d like to store this test project) and run this command.
compass create sass-test
Alternatively you can pull down the test project from GitHub using this:
git clone https://github.com/thesassway/sass-test.git
But that would completely defeat the purpose of learning how to do this on your own.
Moving on. Change directory (cd) into the newly created
/sass-test directory and open it up in your favorite editor. I use TextMate, but I’ve been contemplating trying out Vim or Sublime Text 2. We’ve covered Vim quite a bit on The Changelog, so take a peek at the search results for Vim on The Changelog and dig in.
Compile Sass to CSS
This is the easiest part. Sass and Compass does all the hard work, so run this command and let Compass do its thing.
You should see something like this if you’ve done well with following along.
$ sass-test git:(master) compass watch FSSM -> An optimized backend is available for this platform! FSSM -> gem install rb-fsevent >>> Compass is polling for changes. Press Ctrl-C to Stop.
If that’s the case go ahead and let out a loud “yee” and pat yourself on the back because you are now ready to start writing your CSS … The Sass Way!
compass watch command does exactly what you would think it would do – it watches your Sass files for changes (saved changes) and automatically compiles your Sass to CSS. How does it know where the Sass is and where the CSS should be compiled to? That’s a great question, and one that I’ll cover in more detail in a future post titled “Configuring Compass”.
Write some Sass
Ok, before we actually write some Sass, it’s important to know that Sass has some history to it. In fact, one of the hardest things to grasp is that Sass actually has two syntaxes – and that’s often what either confuses or intimidates people and deters them from even giving it a try. How do I know? Because that’s exactly how I felt BEFORE I bit the bullet and took the proverbial plunge. But let’s not get off track here.
Sass is like CSS. Ok, that’s misleading. Sass CAN BE like CSS. I mentioned that Sass has some history to it and actually has not one, but two syntaxes. One of the syntaxes is even named “Sass” which adds even more confusion to the mix. The main syntax is referred to as “SCSS” (for “Sassy CSS”) and is new as of Sass 3. The older syntax (part of that history I mentioned) is referred to as the indented syntax (or just “Sass”).
Now that we’ve covered a bit of the history of Sass and the fact that it has two syntaxes, I believe we are ready to write some code. Or should I say SCSS – because the SCSS syntax is like CSS and was designed to be a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS. In fact, you can copy the contents of a CSS file and paste it into a SCSS file and Sass will compile it to clean CSS.
Let’s test out this “theory” and copy the contents of our css file from this blog and paste it intoscreen.scss in our test project and run
compass compile. Take a look at screen.css now and you’ll see that Sass and Compass have compiled that compressed un-readable CSS to readable, perfectly indented CSS along with comments of where the code came from for debugging purposes.
Conclusion and next steps
This example is obviously not the most practical example, and technically we didn’t write anycode. I just wanted to prove to you that there can be next to zero effort in transitioning to Sass because you just did it.
The next step is to take advantage of the features of Sass and Compass that are now available to you, when you choose to use them. That’s the best part of this transition. You can incrementally step into what Sass and Compass have to offer. There’s no reason to be intimidated or feel it will “take weeks” to do.