The first thing is to set some variables, as it's almost always the same step for every Sass project:

$font-size:16px;
$scale:.75;

I personally like the fourth ratio, so I'll use it here as an example. As you'll see, it will be easy for you to change it to your preferred one.

We'll now do some math – or better than that, we're going to let Sass do the math for us:

$s: $font-size*$scale;   
$r: $font-size;  
$l: $r/$scale; 
$xl: $l/$scale; 
$xxl: $xl/$scale;
$xxxl: $xxl/$scale;

I personally labeled the base font as Regular, you can name it as you please – and the following sizes are made by simple multiplication/division for our scale factor.

Using the 16px base we're going to obtain the following values:

12, 16, 21, 28, 37, 50, 67

Yes, the H1, for example, is too big – but it doesn't really matter right now, you'll be able to change it in a heartbeat.

Now, how can you use it?

Simple enough, you just have to do one simple declaration – or more, based on the number of variables you need:

h1 {
    font-size:$xxxl;
}

This will make your CSS look like this:

h1 {
  font-size: 50.5679px;
}

See the usefulness? Naming the variables as you want, applying another variable for line height and recalling it later is easier than before – and you can apply the values automatically with ems, rems and pixel units as you want – to any property you want with the simple memory of a basic name like small, large, and so on – without having to input any unrelated value ever!

If you're not happy – wait 'til I reveal the next step in our chapter.