Now I’m going to be using the Terminal during this series and I know that a lot of designers will be gasping for breath with comments like “I’m no good with the Terminal, I’ll break my Mac!” Well that’s what I said when I started using it but actually, it’s very straight forward so give it a go and stop being a scaredy cat! Believe me when I say that, coming from a print design background myself, I used to be much more comfortable setting up stylesheets in Adobe’s InDesign than using the Terminal but as with everything, practise makes progress.

What are Sass and Compass?

Ok well this has already been written by people who know much more than me so I’ll ask you to check out sass-lang.com and compass-style.org for a quick swot-up on what each of them do but as you are already here reading this then I will jump to the conclusion that you have at least heard of both of them. So let’s get started for real.

Installing Sass and Compass

First of all you will need to install Sass and Compass. So, open up the Terminal app by either hitting Command and Space Bar to launch the search tool and type in Terminal, or if you have decades to spare then go to Applications > Utilities > Terminal and double-click the app.

At the prompt, type in the following (note that the $ is the prompt at the start of the line and you do not need to type it). When you enter a command with sudo you will have to authenticate by entering your system password;

$ sudo gem install sass

That’s it, Sass is now installed and up-to-date. Easy!

Next up let’s get you running Compass. I’m sure you can guess what’s coming next but if not, then enter this at the prompt;

$ sudo gem install compass

That’s it, Compass is now installed, too! Now you are rocking the Terminal app like a Kool Cat and I bet you feel really great.

So now we have everything that we need to get up-and-running using Sass. If you really do not want to use the Terminal app then there are GUIs out there that all work very well but I do urge you to at least give the Terminal a good try.

Starting your first Sass / Compass project

So let’s get started and create our first project. Now it’s important to understand that you can simply write standard CSS into a Sass file and it will work just fine. So for that reason alone there is nothing stopping you from giving it a try and the when you feel comfortable setting it up each time you can start to implement simple Sass mixins and variables as you move forwards and have Compass compile it into a compressed CSS file automatically for you.

Navigate to where you would like to create your website project. Again we will use the Terminal. So for example let’s just use our user’s home folder for now (I would recommend you set up a local server for developing sites but that’s out of the scope of this series). So enter the following in your Terminal app;

$ cd ~/

That will take you to your current user’s home folder.

Now enter (replacing project-name with what you like);

$ compass create project-name

Now you will see your new folder magically appear with the following contents;

project-name
 config.rb
 sass
  ie.scss
  print.scss
  screen.scss
 stylesheets
  ie.css
  print.css
  screen.css

Don’t worry about the .scss and .css files for now, in fact you can delete these if you like as we won’t be using them. The important file is the config.rb file. This tells Compass what settings to use for this project and will contain the following by default;

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

Now you can work with this as it is if you like but personally I use different folder names so I change the;

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

to;

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"

But that is just a personal preference and you do not need to change anything to get started. I also change the;

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

to;

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
output_style = :compressed

All that this does is when Compass compiles your scss into the automatically generated css file it will remove all white space and reduce the file size quite dramatically. This is just one of many bonuses of using this workflow as the browser can load in your css file much more quickly. To start with I would recommend leaving your CSS un-compressed so that you can check your CSS after compiling it. This way you will get a good idea of what is going on under the hood. You can always compress it before saving out to production.

Now if you have deleted the auto-generated stylesheets in those folders then you will need to create a blank file with your chosen text editor of choice (I use Sublime Text 2 but there are many available). So create a new file and call it what you like, so for example;

style.scss

Note the .scss file extension and save this file into your sass folder. You will note that nothing magical happens and you are feeling a little let down. Well that’s because Compass needs to be told to watch your project before it will compile your files. To do this, enter the following at the Terminal prompt;

$ cd project-name
$ compass watch

The first line simply moves you into your working directory, the second line tells Compass to watch for any changes to your Sass files and then if it does see a change, to auto-compile and save out the compressed (if you chose that setting) CSS file into the stylesheet directory. Now that’s magic.

Now you need to import some Compass goodies into your Sass (style.scss) file so that Compass knows what to do when you start writing fancy mixins etc. So the first thing we will enter is the following;

@import "compass/css3";

This imports all of the Compass CSS3 goodies. For more information on this and other imports, check out the compass-style.org/reference. All you need to know for now is that if you include that, then you are good to start using loads of CSS3 features with cross-browser compatibility.

Next up let’s set up a basic colour palette using variables by adding the following in to your style.scss file;

@import "compass/css3";

$main: #d1102a;
$secondary: #232527;

The great thing about variables is that if the project stakeholder decides that the corporate main colour needs to change from blue to red then you don’t need to change this in your code using a find and replace system or even worse, manually! You can simply change the reference in your variable and it will change automatically throughout your CSS.

So far we have not written any styles, all we have done is set up some initial steps. So let’s jump in and write some styles using our mixins that we have imported and variables that we have set up. Now this will look pretty ugly but I just want to demonstrate how powerful this can be. Add the following header selector and declarations to your Sass file so that it looks like the following;

@import "compass/css3";

$main: #d1102a;
$secondary: #232527;

header {
	max-width: 600px;
	height: 300px;
	background: $main;
	border: 5px solid $secondary;
	@include border-radius(10px);
}

And build your html as normal with this included (remember to link to your CSS file in the head of your HTML and not the Sass file);

    
Hello world

You will now get a red box with a solid 5px border with 10px rounded corners showing the text Hello world as a h1. But that’s not the fun part, go checkout your CSS file. It will now include the following;

header {
    max-width: 600px;
    height: 300px;
    background: #d1102a;
    border: 5px solid #232527;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

You can see that during compile, the mixin border-radius has told Compass to create all necessary browser prefixes for the border-radius declaration. Note that Compass will use the prefixes that are required as of the latest release of Compass. So keep your Compass files up-to-date and your browser prefixes will always be relevant when you are saving out your files. So instead of typing 5 lines of code you simply type in just one. You will also see that it has replaced your colour variable $main with the colour that you specified when declaring the variable at the start. So if you change the colour which is associated with that variable to another colour and then re-save your Sass file, Compass will change all references to that colour automatically for you. Let’s take it a step further and add in a horrible gradient below our background declaration;

@import "compass/css3";

$main: #d1102a;
$secondary: #232527;

header {
    max-width: 600px;
    height: 300px;
    background: $main;
    @include background-image(linear-gradient($main,$secondary));
    border: 5px solid $secondary;
    @include border-radius(10px);
}

This will change our background from our main colour to a linear gradient starting at the top with our main colour and finishing at the bottom with out secondary colour. Our compiled CSS will now look like this;

header {
    max-width: 600px;
    height: 300px;
    background: #d1102a;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d1102a), color-stop(100%, #232527));
    background-image: -webkit-linear-gradient(#d1102a, #232527);
    background-image: -moz-linear-gradient(#d1102a, #232527);
    background-image: -o-linear-gradient(#d1102a, #232527);
    background-image: linear-gradient(#d1102a, #232527);
    border: 5px solid #232527;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

Just look at how much work Sass and Compass are doing for us in this simple example. We are writing 5 lines to create a cross-browser compatible 14 lines! Not to mention that if we wanted to now change our main colour, how much quicker this would be to change one variable instead of 6 references. Power!

So I hope that from this you can start to see how easy it is to get started using Sass and Compass and also how easy it is to actually start saving yourself some valuable time and headaches. I’m still learning this myself so as I work my way though Ben Frain’s excellent book, Sass and Compass for Designers, I’ll keep on posting up little snippets on here to help you along.

As always, feel free to debug my code and post alternative suggestions in the comments below. I’m always open to new ways of working, especially if I am following bad-practice.