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.
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.
- 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.
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.
- 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.
If I have missed anything out which may be beneficial for those starting out please leave a comment! :)