SASS Type Scale

type-scale.sass

// The basis of calculations, and your root html font size.
$base-font-size: 16px
// Change this to your type scale modifier.
// https://type-scale.com/
$type-scale: 1.25
// The desired unit supports "rem", "em", and "%".
$desired-unit: 'rem'

// Generate a type scale value based on the number of steps if this is ascending or descending.
// It is recommended to compile with the "--precision 3" flag to avoid long decimals.
@function typeScaleSize($steps)
  // The default size is instantiated at 1 for calculations
  $font-size: 1
  // Do nothing if the scale passed is 0, just return the type scale value with necessary conversion.
  @if $steps != 0
    // Iterate through the scale to the proper size. Ensure we are getting an absolute value for negative steps.
    @for $i from 1 through abs($steps)
      // Determine if this is ascending or descending the type scale.
      @if $steps + 1 > 0
        $font-size: $font-size * $type-scale
      @else
      $font-size: $font-size / $type-scale

  @if $desired-unit == '%'
    $font-size: $font-size * 100

  @return unquote($font-size + $desired-unit)

// The html element should be set to the base font size for proper scaling.
html
  font-size: $base-font-size

h1
  font-size: typeScaleSize(5)

h2
  font-size: typeScaleSize(4)

h3
  font-size: typeScaleSize(3)

h4
  font-size: typeScaleSize(2)

h5
  font-size: typeScaleSize(1)

h6
  font-size: typeScaleSize(0)

// A few utility classes for demonstration.
.small-text
  font-size: typeScaleSize(-1)

.tiny-text
  font-size: typeScaleSize(-2)