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.

People who have viewed this post also viewed

Comments

  1. Karen

    Thanks for the clear directions on getting Sass watch to work. Not sure where I went wrong on my own, but I have finally have it working.

    Reply
  2. Nick

    I’ve tried to post a comment but for some reason it doesn’t appear. I’m having an issue after I install compass…
    Here’s what I get :
    “Gem files will remain installed in /Library/Ruby/Gems/2.0.0/gems/ffi-1.9.5 for inspection.
    Results logged to /Library/Ruby/Gems/2.0.0/gems/ffi-1.9.5/ext/ffi_c/gem_make.out
    Nicolass-MacBook-Pro:documents NickFury$ compass create my-awesome-compass-project
    -bash: compass: command not found
    Nicolass-MacBook-Pro:documents NickFury$ create my-awesome-compass-project
    -bash: create: command not found
    Nicolass-MacBook-Pro:documents NickFury$ ”

    Can you help me pls ?
    thanks

    Reply
    1. Sam Post author

      Hi Nick, try installing an older version of Compass, I’ve noticed a few issues with the latest version that haven’t quite been ironed out yet. I find version 0.12.7 to be really stable. You can install/revert back to this version with the commands below:


      $ gem update --system
      $ sudo gem install compass -v 0.12.7

      Reply
  3. Nick

    Here :
    Nicolass-MacBook-Pro:~ NickFury$ cd documents
    Nicolass-MacBook-Pro:documents NickFury$ sudo gem install compass
    Building native extensions. This could take a while…
    ERROR: Error installing compass:
    ERROR: Failed to build gem native extension.

    /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/ruby extconf.rb
    mkmf.rb can’t find header files for ruby at /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/include/ruby.h

    Gem files will remain installed in /Library/Ruby/Gems/2.0.0/gems/ffi-1.9.5 for inspection.
    Results logged to /Library/Ruby/Gems/2.0.0/gems/ffi-1.9.5/ext/ffi_c/gem_make.out
    Nicolass-MacBook-Pro:documents NickFury$ compass create my-awesome-compass-project
    -bash: compass: command not found
    Nicolass-MacBook-Pro:documents NickFury$ create my-awesome-compass-project
    -bash: create: command not found
    Nicolass-MacBook-Pro:documents NickFury$

    what went wrong ?

    Reply
  4. Jim

    My problem was the “$” sign in “$ ruby -v”. I didn’t read the light grey blurb above it. Not sure why one would even include the “$” in that instruction.

    Reply
  5. Eric

    After running the line gem install sass I get the ERROR: You don’t have write permissions for the /Library/Ruby/Gems/2.0.0 directory

    Running [sudo] gem install sass gives me: –bash command not found.

    Did some searching for a reason behind the write permissions error and came across this – http://stackoverflow.com/questions/14607193/installing-gem-or-updating-rubygems-fails-with-permissions-error

    Any suggestions on which route to take or if I should even move forward. I would really love to learn SASS but don’t want to break my machine by doing something I am unsure of. Since I am a complete beginner to the SASS and Ruby area I feel like I would be getting in over my head with the additional rbenv or RVM installs.

    Reply
  6. Alekks

    Heya, great tutorial – the first part anyway ;)

    I’m stuck at step 7. When I’ll try to watch the file I just get the error in the terminal saying:
    -bash: sass: command not found

    I’ve got Ruby;
    ruby 2.0.0p451 (2014-02-24 revision 45167) [universal.x86_64-darwin13]

    But apparently not the SASS part. I’ll guess when you’ll read this I’ve figured it out by googling but for future noobs like me wanting to take the leap to the future train of SASS – could be a good thing to include how to fix this. :)

    Cheers!

    R.
    Alekks

    Reply
    1. Alekks

      Sorry, my mistake. I misunderstood the Steping-ology of the tutorial. Please delete my previous comment :)

      I thought that Step 3 was just going to get through if you didn’t have Ruby installed. My bad.

      Keep up the great work!
      Cheers!

      Reply
  7. Joga

    This is not working:
    Jogas-MacBook-Pro:sass-test jogagavidia$ sass –watch test.scss:test.css
    -bash: sass: command not found

    Reply
    1. Sam Post author

      Have you installed the Sass gem? Try the following commands:

      $ gem update --system
      $ [sudo] gem install sass

      Then use $ sass -v to check if it’s installed properly.

      Reply
  8. 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