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