What is CSS3, SASS, SCSS, COMPASS, LESS, BOURBON
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 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
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 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 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
- 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! :)