Chapter 3. Compass – Navigating with Compass

In the previous chapter, we saw how using Sass can solve problems that would have been almost impossible with plain CSS. Possible or not, it would certainly have been unfeasible to attempt what we covered in the last chapter with vanilla CSS. In this chapter we'll look at one of the most well-known frameworks built with Sass, known simply as Compass.

Compass was created at a time when HTML5/CSS3 was still in its early stages of adoption, not only by the major browsers, but also by web designers and developers. This is commonly called the experimental implementation phase. This is where we get vendor prefixes from.

When I first began using Compass, it was mainly for its ability to automatically compile all of the necessary vendor prefixes and even those painfully verbose filters (also known as polyfills) in certain CSS3 properties. To me it was just a mixin library which made setting up and maintaining Sass projects much easier. I tried the Blueprint grid and the sprite generator, but mainly I was interested in creating a project quickly, watching for changes, and using the mixins for vendor prefixes. If you are currently using Compass only for vendor prefixing, then this is the chapter for you.

In this chapter we'll look at creating a project from scratch using Compass. We'll look at the default configuration of Compass and the folders and files it creates by default. We'll also learn how to take control of the default options through the command line, including the directories Compass creates by default.

Once our project is created, we'll look at setting up a vertical rhythm for a typography based webpage, such as a blog post or news article. We'll look at the reason Compass prefers to use the reset methodology over the normalize method. From there we'll set up our vertical rhythm and use the built-in baseline grid to make sure our text is staying within our grid. We'll also see how Compass can be used to give elements other than text heights based upon the vertical rhythm we've defined.

We'll take a look at using SassMeister or CodePen for times when you don't want to create a full Sass or Compass project. Perhaps you simply want to test out a framework, or try an idea or feature out really quickly, and setting up files and directories would either take too long, or simply not be worthwhile. We'll look at SassMeister and CodePen's similarities and parities and why we might choose one over the other in certain circumstances.

Finally, we'll create a few simple experiments to try out some of the mixins and functions Compass offers for dealing with CSS3 properties such as columns, transforms, and animations. We'll also see how Compass offers mixins to overcome some common and not so common design challenges. These include horizontal and unstyled lists, styling links, and tag clouds.