Managing responsive typography with Sass

SassMeister-input.scss

// ----
// libsass (v3.5.0.beta.2)
// ----

// config/_breakpoints.scss
$breakpoints: (
  small:   480px,
  medium:  720px,
  large:   960px,
  x-large: 1280px
);

// config/_typography.scss
$text-sizing: (
  centi: (
    small: (
      font-size: 12px,
      line-height: 16px
    )
  ),
  deci: (
    small: (
      font-size: 14px,
      line-height: 20px
    )
  ),
  base: (
    small: (
      font-size: 16px,
      line-height: 26px
    )
  ),
  deca: (
    small: (
      font-size: 18px,
      line-height: 26px
    ),
    large: (
      font-size: 20px,
      line-height: 30px
    )
  ),
  hecto: (
    small: (
      font-size: 22px,
      line-height: 28px
    ),
    large: (
      font-size: 24px,
      line-height: 32px
    )
  ),
  kilo: (
    small: (
      font-size: 24px,
      line-height: 32px
    ),
    large: (
      font-size: 28px,
      line-height: 36px
    )
  ),
  mega: (
    small: (
      font-size: 36px,
      line-height: 48px
    ),
    large: (
      font-size: 40px,
      line-height: 60px
    )
  )
);

// lib/functions/_responsive.scss
@function breakpoint ($breakpoint-name) {
  $breakpoint-value: map-get($breakpoints, $breakpoint-name);

  @if $breakpoint-value {
    @return $breakpoint-value;
  }

  @warn "Breakpoint '#{$breakpoint-name}' not found in $breakpoints";
}

// lib/functions/_typography.scss
@function text-breakpoints-for ($text-size) {
  $text-breakpoints: map-get($text-sizing, $text-size);

  @if $text-breakpoints {
    @return $text-breakpoints;
  }

  @warn "Text size '#{$text-size}' not found in $text-sizing";
}

@function text-properties-for ($text-size, $breakpoint-name) {
  $text-breakpoints: text-breakpoints-for($text-size);
  $text-properties: map-get($text-breakpoints, $breakpoint-name);

  @if $text-properties {
    @return $text-properties;
  }

  @warn "Breakpoint '#{$breakpoint-name}' for text size '#{$text-size}' was not found";
}

// lib/mixins/_responsive.scss
@mixin respond-above ($breakpoint-name) {
  $breakpoint-value: breakpoint($breakpoint-name);

  @if $breakpoint-value {
    @media screen and (min-width: $breakpoint-value) {
      @content;
    }
  }
}

// lib/mixins/_typography.scss
@mixin text-size ($text-size, $breakpoint-name: 'small') {
  $text-size-properties: text-properties-for($text-size, $breakpoint-name);

  @if $text-size-properties {
    font-size: map-get($text-size-properties, 'font-size');
    line-height: map-get($text-size-properties, 'line-height');
  }
}

@mixin responsive-text-size ($text-size, $default-breakpoint: 'small') {
  @include text-size($text-size, $default-breakpoint);

  $text-breakpoints-map: text-breakpoints-for($text-size);
  $text-breakpoints-keys: map-keys($text-breakpoints-map);

  @each $breakpoint-name in $text-breakpoints-keys {
    @if $breakpoint-name != $default-breakpoint {
      @include respond-above($breakpoint-name) {
        @include text-size($text-size, $breakpoint-name);
      }
    }
  }
}

// _typography.scss
.text--mega {
  @include responsive-text-size('mega');
}

.text--kilo {
  @include responsive-text-size('kilo');
}

.text--hecto {
  @include responsive-text-size('hecto');
}

.text--deca {
  @include responsive-text-size('deca');
}

.text--base {
  @include responsive-text-size('base');
}

.text--deci {
  @include responsive-text-size('deci');
}

.text--centi {
  @include responsive-text-size('centi');
}

SassMeister-output.css

.text--mega {
  font-size: 36px;
  line-height: 48px;
}

@media screen and (min-width: 960px) {
  .text--mega {
    font-size: 40px;
    line-height: 60px;
  }
}

.text--kilo {
  font-size: 24px;
  line-height: 32px;
}

@media screen and (min-width: 960px) {
  .text--kilo {
    font-size: 28px;
    line-height: 36px;
  }
}

.text--hecto {
  font-size: 22px;
  line-height: 28px;
}

@media screen and (min-width: 960px) {
  .text--hecto {
    font-size: 24px;
    line-height: 32px;
  }
}

.text--deca {
  font-size: 18px;
  line-height: 26px;
}

@media screen and (min-width: 960px) {
  .text--deca {
    font-size: 20px;
    line-height: 30px;
  }
}

.text--base {
  font-size: 16px;
  line-height: 26px;
}

.text--deci {
  font-size: 14px;
  line-height: 20px;
}

.text--centi {
  font-size: 12px;
  line-height: 16px;
}