Sass is the default preprocessor for Ruby stylesheets and is probably the second most popular option behind LESS. Sass has a great balance between having a low learning curve and powerful features, making it a great middle ground between LESS and Stylus. Sass has all the features that LESS has, but also includes a large amount of advanced functionality.
Why did you vote for Sass?
Powerful Features Provide Variables Logic and Functions
Compass Framework Adds Great Features
Very Active Community
Modern or Backwards Compatible Syntax
Source maps support
Add Another Pro
Sass has the following key features:
- Control Directives - Sass control directives provide flow and logic and give you a finite level of decision making required by mixins and functions. Fore more information go here
- If/else statements, foreach loops, array lists, and type detection enable powerful mixins.
- @extends - The magic behind @extend is that it allows you to style selectors that piggyback on other selectors and borrow their properties.
- Protocol for extending Sass to add your own custom functions.
- Keyword Arguments - Allows you to make your code clearer.
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.
Sass can be used with a awesome framework called Compass, which provides the following handy features:
- It extends Sass with popular css frameworks (blueprint & 960.gs)
- It makes creating sprites a breeze (a issue with other preprocessors)
- Lets you establish a vertical rhythm on your site with a baseline grid framework.
- Comes with mixins that make CSS3 easy.
- Provides common code that would otherwise be duplicated across other frameworks and extensions.
- Plugin architecture to add your own stuff and a ruby script to automatically generate base files for your project.
Compass is like a CSS cookbook: It contains solutions to a lot of known and reoccuring CSS problems and patterns, not just CSS3 mixins. It's the most complete and well-documented collection out there, and this is why you should use it. From something as easy as '@include border-top-right-radius', for just rounding the top right corner, or '@include horizontal-list' for creating a horizontal UL menu, to complex spriting creation:
And yes: No need to remember awkward namespaces either, because you just @import "compass", and that's it.
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.
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 contains all the features of 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 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
still in beta, but the source maps support in SASS and WebInspector is literally the best way to debug CSS preprocessors, as you seen here.