Some quick differences between CSS3, SASS, SCSS, COMPASS, LESS, BOURBON. Short and sweet bullet points and links. For those who are new to learning CSS, read below and then START USING COMPASS!



  • CSS3 is the latest version of CSS and provides capable browsers with extra functionality such as animations.

Learn CSS3 Demo Documentation Test your browsers capable of CSS3



  • SASS (Syntactically Awesome Style Sheets).
  • SASS is a superset (extension) of CSS3 and provides extra functionality such as nesting, variables, mixins etc…
  • SASS can generate CSS files on the fly as you edit them.
  • Sass is processed server-side using Ruby.
  • SASS uses line breaks and indentation to determine rule separations much like HAML.
  • SCSS (Sassy Style Sheets).
  • SCSS is functionally the same as SASS except it uses curly braces to separate rules.

Website Documentation How to Install

Quick Example

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.2em;

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;

    family: serif
    weight: bold
    size: 1.2em



  • COMPASS is a CSS framework which uses SASS.
  • COMPASS provides a library of valuable CSS3, cross browser mixins, typography patterns.
  • COMPASS builds image sprites and includes them in CSS with ease.
  • Easily updated via command line for latest browser prefixes.

Website Demo How to Install 1 How to Install 2

Quick Example

This COMPASS code:

#opacity-10 {
    @include opacity(0.1);

Generates this CSS:

//For IE<9

#opacity-10 {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10);
    opacity: 0.1;

//For all other browsers

#opacity-10 {
    opacity: 0.1;



  • LESS is a JavaScript library so it’s processed front end.
  • LESS shares a lot of common functionality of SASS such as nesting, variables, mixins etc..
  • Sass has Compass and LESS does not.

Website Demo Documentation LESS vs SASS



  • A simple and lightweight mixin library for SASS.
  • Codekit can handle Bourbon mixins right out the box, no configuration needed.
  • Hammer is also preconfigured for Bourbon.

Website Demo Documentation

If I have missed anything out which may be beneficial for those starting out please leave a comment! :)

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • shako

    CSS li{
    font: 1.2em bold serif;

    • jQuery4u

      yeah I agree it’s not the best example… but shows how they work.

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.