Recs.
Updated
Sass provides two syntax options - Sass, which omits the use of semicolons and brackets, and SCSS, which is written like vanilla CSS with added features. Frameworks such as Bourbon and Compass can be used to further extend Sass.
Specs
Pros
Pro Powerful advanced function features
You are able to declare custom functions with Sass (for example, converting units) which can be easily invoked, even when using shorthand properties. This results in cleaner, more reusable code.
Pro Nested selectors
Sass allows you to nest selectors which results in code that is both faster to write and cleaner to read.
For example, this:
.parent
color: blue
.child
color: yellow
Will compile to this:
.parent {
color: blue;
}
.parent .child {
color: yellow;
}
Pro Rapid development
Another big advantage for Sass is the very active community pushing the development forward at a rapid pace. Sass is constantly coming out with bug fixes, and are often the first to come out with improvements.
This is an important factor to keep in mind when picking a preprocessor to invest your time into.
Pro Extends CSS maintaining compatibility with CSS standards specification
It comes with two possible syntaxes:
- Sass - No parens or semicolons allowed and the nesting is dictated with whitespace.
- SCSS - SCSS syntax is a superset of CSS – which means SCSS can be written as CSS, but has been expanded to include the features of Sass as well.
SCSS is easier to pick up for beginners and Sass has a cleaner syntax. Having both syntaxes means you can pick the one that best suits your coding style.
The mandatory syntax rules for both SCSS and Sass results in a more consistent code. For a more detailed analysis between Sass and SCSS go here. To see a nice comparison of the Sass syntax against CSS and SCSS go here.
Pro Compass framework provides added features
Sass can be used with a framework called Compass, which provides additional functions and mixins which can reduce the amount of code you have to write.
For example, Compass will take care of vendor prefixes.
This:
div {
background-image: -webkit-linear-gradient(#F00, #000);
background-image: -moz-linear-gradient(#F00, #000);
background-image: -o-linear-gradient(#F00, #000);
background-image: linear-gradient(#F00, #000);
}
Can be written as:
.gradient {
@include background-image(linear-gradient(#F00, #000));
}
For a full list of features, check out the Compass documentation.
Pro Libsass - C/C++ port of Sass
There is also a C/C++ port of the Sass CSS precompiler called Libsass that decouples Sass from Ruby. It is very fast, portable and easy to build and integrate with a variety of platforms and languages.
Cons
Con Requires Ruby or libSass
To compile Sass, it needs either Ruby or libSass installed locally.
Con Noisy syntax
There is many unnecessary characters when using the SCSS syntax.
{}:;@
However using the Sass syntax eliminates them.