🤯 50% Off! 700+ courses, assessments, and books
Browse Titles
JavaScript

What is CSS3, SASS, SCSS, COMPASS, LESS, BOURBON

Sam Deering
Share

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

css3

  • 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 and SCSS

sass

  • 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

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

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

SASS
li
  font:
    family: serif
    weight: bold
    size: 1.2em

COMPASS

compass

  • 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

less

  • 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

BOURBON

bourbon

  • 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! :)