Document differences between grunt-contrib-compass and grunt-contrib-sass

[nwwells]

For example, please answer the following questions:

• Why would I use grunt-contrib-compass instead of grunt-contrib-sass?
• Are the same people working on both projects? Aren't you doubling the work to implement the same thing?

The answer to these questions is probably obvious to you, but at first glance it's confusing to me (at least).

[robwierzbowski]

Since it's so common to install Sass and Compass together people often have a hard time telling the difference between the two. Even good developers I know mix up which code and settings they use are vanilla Sass and which are provided by Compass.

@nwwells, to answer your question:

Sass is a css preprocessor. It adds simple programatic concepts to css, like variables, functions, mixins, and logic. It also comes with authoring improvements like nesting, partials, and some functions that cover a lot of common use cases.

Compass is a framework including a pre-built Sass mixin library and some bundled tools that go beyond what Sass can do. It is a separate project, but adds so much that most people install them together. A partial list:

Framework: Define your Sass environment with a file (config.rb) instead of on the command line. Standardizes the pattern for new Sass extensions to make building and using them easier.

Library: Most of Compass is a huge mixin and function library that helps authors with css3 fallbacks, common patterns like clearfix, and advanced calculations like vertical rhythm. Great if you don't want to write and maintain all of this stuff yourself.

Other tools: Compass includes a library (formerly Lemonade) for automatically creating png sprite sheets from a directory filled with single images, and mixins and functions for easily using them in css.

A good way to learn the difference between the two is to read the Sass Reference — it's not too long. Then check out tutorials on Sass with Compass, and the Compass docs here. Pretty much anything that isn't Sass or a custom extension is probably Compass.

I think we can alleviate some of this confusion by changing the plugin's description. When you run grunt-contrib-compass you're not really "compiling Compass", you're compiling Sass using the Compass framework. @sindresorhus, would you be interested in a pull request that clarifies the description in the readme and package.json?