SASS Typography (SassMeister)

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// Breakpoint (v2.5.0)
// Modular Scale (v2.1.1)
// ----

@import "modular-scale";
@import "breakpoint";

$font-size-base: 1.125rem;

$ms-base: $font-size-base;
$ms-ratio: $fourth;

$ms-norm: $ms-base;
$ms-h1: ms(3);
$ms-h2: ms(2);
$ms-h3: ms(1);
$ms-h4: ms(0);
$ms-h5: ms(-1);

$ms-smscr-ratio: $minor-third;

$ms-smscr-norm: $ms-base;
$ms-smscr-h1: ms(4, $ms-base, $ms-smscr-ratio);
$ms-smscr-h2: ms(3, $ms-base, $ms-smscr-ratio);
$ms-smscr-h3: ms(2, $ms-base, $ms-smscr-ratio);
$ms-smscr-h4: ms(1, $ms-base, $ms-smscr-ratio);
$ms-smscr-h5: ms(0, $ms-base, $ms-smscr-ratio);

$ms-xsmscr-h1: ms(3, $ms-base, $ms-smscr-ratio);
$ms-xsmscr-h2: ms(2, $ms-base, $ms-smscr-ratio);
$ms-xsmscr-h3: ms(1, $ms-base, $ms-smscr-ratio);
$ms-xsmscr-h4: ms(0, $ms-base, $ms-smscr-ratio);
$ms-xsmscr-h5: ms(-1, $ms-base, $ms-smscr-ratio);

$headings: (
  h1: (
    $ms-xsmscr-h1,
    $ms-smscr-h1,
    $ms-h1
  ),
  h2: (
    $ms-xsmscr-h2,
    $ms-smscr-h2,
    $ms-h2
  ),
  h3: (
    $ms-xsmscr-h3,
    $ms-smscr-h3,
    $ms-h3
  ),
  h4: (
    $ms-xsmscr-h4,
    $ms-smscr-h4,
    $ms-h4
  )
);

$breakpoints: (
  1: 600px,
  2: 800px
);

$code: (
  0.9rem,
  0.95rem,
  1rem
);


//--------------------------------------------------------

@mixin respond-above($breakpoint) {
  @include breakpoint($breakpoint) {
    @content
  }
}

@mixin text-size($index) {
  @each $heading, $size in $headings {
    #{$heading} {
        font-size: nth($size, $index+1);
    }
  }
  code,
  pre {
    font-size: nth($code, $index+1);
  }
}

@mixin responsive-text-size() {
  @include text-size(0);
  
  @each $index, $breakpoint in $breakpoints {
    @include respond-above($breakpoint) {
      @include text-size($index);
    }
  }
}

@include responsive-text-size();

SassMeister-output.css

h1 {
  font-size: 1.944rem;
}

h2 {
  font-size: 1.62rem;
}

h3 {
  font-size: 1.35rem;
}

h4 {
  font-size: 1.125rem;
}

code,
pre {
  font-size: 0.9rem;
}

@media (min-width: 600px) {
  h1 {
    font-size: 2.3328rem;
  }

  h2 {
    font-size: 1.944rem;
  }

  h3 {
    font-size: 1.62rem;
  }

  h4 {
    font-size: 1.35rem;
  }

  code,
  pre {
    font-size: 0.95rem;
  }
}
@media (min-width: 800px) {
  h1 {
    font-size: 2.66667rem;
  }

  h2 {
    font-size: 2.0rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  h4 {
    font-size: 1.125rem;
  }

  code,
  pre {
    font-size: 1rem;
  }
}