Handling Typography Scale Using SASS

We'll first need to calculate the base to the exponent power of every heading using sass-math-pow

npm install -D sass-math-pow

Then just import it in your .scss/sass file.

@import "~sass-math-pow/sass/math-pow";

Now lets add a few variables to make this easy to edit, we are gonna use these settings:

$typographyScaleRatio: 1.2;
$baseFontSize: 14;

And then lets do the math inside a mixin so we can reuse it later, maybe to add different sizes per screen size:

/**
 * em function
 * Converts px to em.
 */
@function em($pixels, $context: $baseFontSize) {
	@return #{ $pixels / $context }em;
}

// Headings sizes mixin.
@mixin headingsSizes($base) {
	@for $n from 1 through 6 {
		// Convert 1 to 6, 2 to 5, etc.
		$reverseN: 6 - $n + 1; // ArrayLength-n+1

		h#{$n},
		.h#{$n} {
			font-size: em(poly-pow($typographyScaleRatio, $reverseN) * $base); // (ratio^n)*base
		}
	}
}

I added a em mixin that converts the px values to em. I like to add .h(1-6) classes so I can use them later to style elements that are not headings to get the same sizes.

Remember to use the $baseFontSize variable in the body font-size property.

To use it you would just call the mixin:

@include headingsSizes($baseFontSize);

Here is how you would use it with different screen sizes: