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...

Setting up a Compass project

One of the biggest time savers Compass offers when you begin using it is when setting up a Sass project. While Sass saves time with the watch command, we still need to create the overall project folder and the directory for our Sass files and Sass files themselves. "That's unacceptable!" I hear you cry. "Manually create our own files and folders?! The nerve!" Thankfully, Compass can ease our pitiful plight with a single command from the command line.

Open your command line and cd into the mastering-sass folder. Within this folder you should have the ch02 folder with the code from the last chapter. What we want to do now is create a new folder called ch03. However, we also want to create a scss folder inside that, inside which we'll create our scss files, which will then need to be compiled into .css files in our css folder. That sounds like a bunch of stuff preventing me from doing some actually important (and dare I say fun) work.

Let's take a look at a faster...

Typography with Compass

In the last chapter we looked at how we could use Sass to help us implement a way of changing our entire typography style based on which font family we wanted to use. It may not be something that is necessary or useful in the majority of projects, but it allowed us to look at using Sass to solve a particular problem.

Compass, on the other hand, is designed to give us the tools and design patterns we need to overcome many of the common problems that we face on most of our web designs. Compass offers helpers that can be employed to tackle unique problems. Compass includes functions to help solve complex math problems, or accessibility issues with its color contrast and text functions. However, Compass also helps us solve complex design challenges such as setting a base typography grid and maintaining vertical rhythm throughout a design.

What is vertical rhythm?

Essentially, vertical rhythm is the alignment of your text and other horizontal elements on your page. Its determining...

Sizing our headings

Let's move on to adjusting our headings font sizes, and then we'll move away from vertical rhythm. To adjust our heading sizes, we'll need to let Compass know we want to adjust their size in relation to the vertical rhythm we've defined. For this, we use the adjust-font-size-to mixin.

We'll also want to use the default heading sizes from the last chapter. However, this time we'll be multiplying them by our $base-font-size variable in order to get the pixel value. Remember, Compass uses pixels in all of its vertical rhythm mixins. So let's create a list with our heading sizes so we can loop through it to create our headings:

// mastering-sass/ch03/scss/screen.scss 
$base-heading-sizes: (2, 1.5, 1.17, 1, 0.83, 0.67); 

Now we can loop through each of items in this list and create all of our headings by multiplying the values by our $base-font-size, which will give us the pixel values for each heading:

// mastering-sass/ch03/scss/screen.scss 
@for $i from 1 through...

Sticky footer, stretching, and sprites

I was torn between including the sticky-footer mixin and the mixins for stretching elements to fit their containing parent element. In the end I've decided not to include them, the reason being, they are all hacks to solve problems that have since been solved by Flexbox in much simpler and cleaner ways, especially the sticky-footer mixin, which even requires additional HTML to be included for it to work.

I'm not saying they're bad. Each of these mixins offers brilliant and useful solutions to these problems. However, Flexbox has completely removed the necessity for these mixins. For that reason I've decided not to cover the sticky footer or stretching mixins.

I also left out the spriting features in Compass from this chapter. Compass sprites are impressive. I can remember being blown away by them when I discovered Compass. However, for almost every situation you find you're creating sprites I would strongly recommend you look into SVG instead. That's...

Compass and the future

It's important to realize Compass began at a time when IE6 was still a concern for designers. You only need to look through the documentation and you'll see numerous IE6 and 7 hacks are still present in its codebase. While there still may be a small percentage actually using IE6 and 7, this shows that Compass is perhaps coming to the end of its usefulness.

In my opinion, the rapid adoption of Flexbox and SVG coupled with the decreasing need for vendor prefixing will reduce the need for Compass drastically in 2016-2017. This might seem sad to some people, but I think we should be happy. That means we no longer need as many hacks to make our designs. That means we're moving in the right direction as an industry.

Summary

In this chapter we looked at numerous features of the Compass framework. We looked at setting up a project using Compass and the benefits of knowing how to take full control of this process. We looked at the typography helpers for creating a vertical rhythm and discussed the challenges that Compass overcomes when creating a vertical rhythm in a design. We also looked at some online code editors that allow you to quickly and easily write Sass and Compass, such as SassMeister and CodePen, and we compared the two.

We also looked at the issue of vendor prefixes and how Compass helps eliminate having to write and maintain them on your projects. We also looked at using Compass to simplify creating an animation and also tag clouds, lists, and unstyled links. We also spoke about the possibility that Compass is nearing its "end of life" cycle. Perhaps that's for the best.

In the next chapter, we'll take a break from writing Sass and Compass and look at some of the theory and concepts you'll...