The Sass and Compass tutorial for absolute beginners

Tags: , &

the-sass-and-compass-tutorial-for-absolute-beginners-by-Zing-Design

Here’s the tutorial I wish I’d had as a beginner. This easy walkthrough is for Mac and Windows users only. I doubt that’s a problem though, as the type of folks who use another OS probably wouldn’t have any trouble installing Sass.

The goal is to show you just how easy it is to set up the environment, the power and simplicity of the command line, how Sass is really similar to plain CSS and the enormously helpful Compass library. You’ll be Sassing away like a pro in 20 minutes or less.

Warning: This tutorial is made for total beginners!

The Sass & Compass tutorial for beginners

Step 1. Check if Ruby is installed (if you’re on a Mac there’s a high chance that it’s already installed on your system). We can check this by opening Terminal on Mac or Command Prompt on Windows, and typing in the following command, then hitting Enter.

Note: Don’t write the $ symbol, that’s just there to indicate that this is a command! …damn I wish someone had told me that earlier…

$ ruby -v

If Ruby is not installed, you’ll probably see something like -bash: ruby: command not found on Mac, and on Windows; ‘ruby’ is not a recognized internal or external command…

If Ruby is installed you should see something like: ruby 2.0.0p195 (2013-05-14 revision 40734)… this will obviously be different depending on the version of ruby.

Step 2. If Ruby isn’t already installed, download the RailsInstaller for your operating system. Then install it :). It will install the entire Rails stack, including Ruby.

Step 3. Enter the following line into your command prompt…

Note: If you’re on Mac, you may have to include sudo at the start if you are not the root user. You won’t need to write this in Windows.

$ [sudo] gem install sass

If you do need to use sudo, it’ll just mean that you’ll have to type in your password before the command can run.

The terminal should do some exciting stuff and eventually you’ll see a message like blah blah blah… 1 gem installed. Woohoo! Sass is good to go… Don’t believe me? Let’s try it out!

Step 4. Navigate to your Documents folder on the command line using the cd (Change Directory) command.

On Mac:

$ cd Documents

On Windows:

$ cd Users/<your-user-name>/Documents

Type in the following. This will give the command line it’s context, it’s just like navigating to a folder in the Finder/Windows Explorer.

Step 5: Create a folder… You could do this the old-fashioned way, but why not try out your new command-line skillz?

Documents$ mkdir sass-test

Step 6: Then we’re going to create our Sass and CSS file with the touch command on Mac or the echo command on Windows.

Documents$ cd sass-test

On Mac:

sass-test$ touch test.scss test.css

On Windows:

sass-test$ echo.>test.scss
sass-test$ echo.>test.css

All right! The command line is pretty handy right?

Step 7: Start “watching” your Sass file

sass-test$ sass --watch test.scss:test.css

The sass tool has a method called –watch, here we’re telling it to watch our Sass file and compile it to our CSS on-the-fly. Use sass –help to see all the other commands sass will let you do.

Step 8: Write some Sass! Open up the test.scss file (You don’t have to do this in the command line, but extra points if you can). Add the following code:

/*! Documents/sass-test/test.scss */

/* Sass variables start with the $ sign, 
...that's about all that makes it different from LESS syntax :p */
$my_color: #BADA55;

nav {
  a{
    color: $my_color;
    &:hover {
      color: darken($my_color, 10%);
    }
  }
}

This is Sassy CSS (hence the .scss), one of the two variations of Sass. It’s similar structure and syntax to CSS makes it an easy place to start. To ease the learning curve, it’s also very similar syntax to LESS.

Save this file, and you should see your command prompt churning away. It’ll come up with a message like…

>>> Change detected to: C:/Users/Username/Documents/sass-test/test.scss

…which means everything’s working as it should be! :) It’ll keep automatically watching for any changes you make, every time you save the file.

Now, if you look at your test.css, you’ll see it’s generated:

/* Documents/sass-test/test.scss */
nav a {
  color: #bada55; }
  nav a:hover {
    color: #a8cf2d; }

Great success!

Great success!

Insert ironically irrelevant pop-culture reference here…

Step 9: Compass time! Now we’ve mastered Sass, let’s kick it up a notch with Compass.

To the command line! First we’ll want to stop watching our Sass file. We can do that with Ctrl+C. Windows users may need to press the Pause Break button instead and hit Y to confirm that you’re stopping the process.

We’ll use cd .. to move up one level to the Documents folder, then we’ll install Compass and create our new Compass project. Easy!

sass-test$ cd ..
Documents$ [sudo] gem install compass
Documents$ compass create my-awesome-compass-project

Step 10: Let’s have a look inside our brand new project

Documents$ cd my-awesome-compass-project
my-awesome-compass-project$ ls -a

This ls -a is a handy command to look inside any given folder and see all the contents (including hidden files). We should see something like:

. .. .sass-cache config.rb sass stylesheets

These are all the resources we need for Compass to work. If you haven’t already guessed, the sass folder contains all of our .scss files, which compile down to the .css files in the stylesheets folder. We’ll just need to start watching the Compass project like we did with our Sass, then we’ll be ready to roll.

Step 11: Start watching our Compass project with this command:

my-awesome-compass-project$ compass watch

…and we’ll see a message like:

>>> Compass is polling for changes. Press Ctrl-C to Stop.

Next we’re going to open up our screen.scss. You should see something like:

/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * 										
 */

@import "compass/reset";

Let’s insert the Sass we made earlier into our screen.scss.

/*! FILE: sass/screen.scss */

/* Welcome to Compass... */

/* We'll just comment the reset out for now to keep things simple... */
//@import "compass/reset";

$my_color: #BADA55;

nav {
  a{
    color: $my_color;
    &:hover {
      color: darken($my_color, 10%);
    }
  }
}

Hit save, and once again, we should hear the command line whirring away as it compiles the Sass down to CSS. Take a look at stylesheets/screen.css if you don’t believe me.

Step 12: Import the Compass library into screen.scss and experience the power of this fully armed and operational development tool.

/*! FILE: sass/screen.scss */

/* Welcome to Compass... */

/* We'll just comment the reset out for now to keep things simple... */
//@import "compass/reset";
@import "compass";

$my_color: #BADA55;

/* ... our Sass */

This will now give us access to ALL of Compass’s many awesome mixins. Let’s try some of them out.

/*! FILE: sass/screen.scss */

//Let's add that reset back in now, 'cos it's helpful...
@import "compass/reset";
@import "compass";

$my_color: #BADA55;
nav {
  @include float-right;   /* Cross-browser floating helper */
  a {
    text-decoration: none;  /* Good ol' fashioned CSS */
    color: $my_color;             
    /* Cross-browser inline-block helper */
    @include inline-block;      
    /* Text-shadow helper + rgba() is a built-in Sass mixin */        
    @include text-shadow(0 1px 1px rgba(#000,0.3));
    /* Cross-browser CSS3 transition */
    @include single-transition(color, 0.5s, ease-in);  
    &:hover {
      /* Compass color mixin: shade() */
      color: shade($my_color, 20%);  
    }
  }
}

Step 13: Hook it up to the HTML… if you haven’t already! For anyone who’s been hanging on, waiting for the surprise and excitement of seeing their Compass styles in action, get ready to have your mind blown!

I’m going to create an index.html in the my-awesome-compass-project directory, this will be where we hook in our newly generated CSS.

First of all, I’ll stop Compass watching my project with Ctrl+C, then I’ll create the HTML file with the touch/echo command used earlier.

On Mac:

$ touch index.html

On Windows:

$ echo.> index.html

Let’s open up the index.html in our text editor of choice and add some basic markup.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My Compass Project</title>
        <!-- You'll see I've linked the screen.css generated by Compass -->
        <link rel="stylesheet" href="stylesheets/screen.css">
    </head>
    <body>
        <header>
	    <h1>My Compass Project</h1>
            <nav>
		<a href="#">Bacon</a>
		<a href="#">Beer</a>
		<a href="#">Barbecue</a>
	    </nav>
	</header>
    </body>
</html>

Step 14: Now open it up in the browser and behold the wondrous power of–

The result of all our hard work!

..oh. That doesn’t look quite so impressive… But we’ve been doing this for like, 20 minutes, what did you expect?

This leads me nicely to the point that Compass, as awesome as it is, is not a front-end design framework. It’s a big library of very handy tools to help cut down on repetitive tasks. You can extend Compass with frameworks like Blueprint and Foundation. These extensions allow you to leverage the power of the framework even further by using their custom-built mixins alongside Compass’s mixins.

You’ll notice if you open it up on any modern browser it looks and functions the same, all the cross-browser prefixes are included and all the little idiosyncrasies have been dealt with. Note: This is HTML5, so you’ll have to include Modernizr or the HTML5shiv for it to work on IE < 9. But you’re using Modernizr already, right?

So this is the end of the tutorial, we’ve only really scratched the surface of what Sass and Compass are capable of, so I encourage you to experiment further and read the docs on the Compass site. They have excellent documentation, tutorials, Compass best practices, support and the various installation methods.

If this is all still a bit too much or you’re having trouble getting Ruby installed, check out the Compass app by Handlino. It’s easy, it’s quick, it’s ten bucks, it works on Windows, Mac, Linux.

Previous post

December 17th, 2013

People who have viewed this post also viewed

Comments

  1. mike

    Thanks for the tutorial… was just looking for something like this yesterday.

    Question on step 8 though. What does the “:p” do in the test.scss file?
    It causes a syntax error for me… but works fine if I remove it.

    Reply
    1. Sam Post author

      Hey Mike, thanks for pointing that out, it was my bad – it’s actually an emoticon that was meant to inside the comment! Have fixed this now, cheers :p

      Reply

Leave a comment

* Required fields

captcha

Please enter the CAPTCHA text