Chapter 1 Getting started with Sass and Compass
In this chapter of 'Sass and Compass for Designers' you will learn where Sass and Compass originated, how they are maintained and crucially, what the difference is between the two. If you're currently unsure where the line between Sass ends and Compass begins, hopefully, it will be clear after reading this Chapter.
With the orientation out of the way, you'll get a brief overview of some tasty features (nesting, @extend, mixins and colour manipulations) and then you'll learn the various ways you can get Sass and Compass installed on your system.
Nesting in Sass looks like this:
p {
color: red;
a {
color: green;
}
}
An @extend in Sass looks like this:
.first-rule { color: red; }
a { @extend .first-rule; width: 100%; }
A Mixin in Sass looks like this:
@include clearfix;
Here's an example of a color manipulation in Sass:
.goodbye-color-picker { color: lighten(red, 20%); }
Both command line and GUI install options are provided so if the thought of using the command line makes you tremble, there's walkthroughs for using CodeKit, LiveReload or Scout.