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

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.

Website Demo Documentation

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

Frequently Asked Questions (FAQs) about CSS3, Compass, and Sass

What are the main differences between CSS and SCSS?

CSS (Cascading Style Sheets) and SCSS (Sassy CSS) are both stylesheet languages used in web development. CSS is the standard language for styling web pages, while SCSS is a preprocessor scripting language that is interpreted or compiled into CSS. SCSS has more features than CSS, including variables, nesting, mixins, inheritance, and others, which can make your code more efficient and easier to maintain.

How does Compass fit into the CSS and SCSS equation?

Compass is a CSS authoring framework that uses Sass. It provides a series of helpful tools and predefined styles that make it easier to write clean, easy-to-maintain CSS. Compass also provides additional features not available in CSS or SCSS, such as automatic sprite generation, built-in functions for manipulating colors, and more.

Is Sass superior to CSS3?

Sass is not necessarily superior to CSS3, but it does offer more features and flexibility. Sass allows for the use of variables, functions, and mixins, which can make your code more efficient and easier to maintain. However, CSS3 is more widely supported and does not require a preprocessor to use.

What are the benefits of using Sass over conventional CSS?

Sass offers several benefits over conventional CSS, including the ability to use variables, nesting, mixins, and inheritance. These features can make your code more efficient, easier to maintain, and more readable. Sass also allows for more complex mathematical operations and logic statements, which are not available in CSS.

How does SCSS differ from Sass?

SCSS and Sass are both preprocessor scripting languages that are compiled into CSS. The main difference between the two is the syntax. SCSS syntax is similar to CSS, making it easier for those familiar with CSS to learn. On the other hand, Sass uses a more concise syntax, removing the need for braces and semicolons.

Can I use Compass without Sass?

No, Compass is a CSS authoring framework that uses Sass. Therefore, you cannot use Compass without also using Sass.

What are the drawbacks of using Sass?

While Sass offers many benefits, it also has a few drawbacks. For one, it requires a preprocessor to compile the Sass code into CSS, which can add an extra step to your workflow. Additionally, because Sass is not as widely used as CSS, it may be harder to find resources or support for it.

Is it difficult to learn Sass if I already know CSS?

If you already know CSS, learning Sass should not be too difficult. The SCSS syntax is very similar to CSS, so you should be able to pick it up fairly quickly. Additionally, there are many resources available online to help you learn Sass.

Can I use Sass and CSS together?

Yes, you can use Sass and CSS together. In fact, any valid CSS is valid SCSS as well. This means you can gradually start using Sass features in your existing CSS codebase without having to rewrite everything.

What tools do I need to start using Sass and Compass?

To start using Sass and Compass, you will need a Sass preprocessor to compile your Sass code into CSS. There are many preprocessors available, including command-line tools and GUI applications. You will also need to install Compass, which can be done through the command line.