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 and SCSS
- 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
- 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
This COMPASS code:
Generates this CSS:
//For all other browsers
- 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! :)