Generated by SassMeister.com.

SassMeister-input-HTML.html

<h1>Responsive</h1>

<div>Typography</div>

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// sass-mq (v3.1.2)
// ----

// Inlucde sass-mq. The media query library from the guardian.
@import "mq";
$mq-breakpoints: (
  phone: 27em,
  tablet: 45em,
  desktop: 60em
);

@mixin propValue($map) {
	@each $prop, $value in $map {
		#{$prop}: #{$value};
	}
}

@mixin typography($element) {
	$map: map-get($typography, $element);
	
	@include propValue(map-get($map, base));
	
	$mq: map-remove($map, base);

	@each $bp, $attr in $mq {
		@include mq($bp) {
			@include propValue($attr);
		}
	}
}

$typography: (
  h1: (
    base: (
      font-size: 180%,
      line-height: 1.2,
      margin: 5rem 0 10rem
    ),
    tablet: (
      font-size: 200%
    ),
    desktop: (
      margin-top: 0
    )
  ),
  jumbo: (
    base: (
      font-size: 300%
    ),
    phone: (
      font-size: 400%
    ),
    tablet: (
      font-size: 500%
    ),
    desktop: (
      letter-spacing: 0.5rem,
      font-size: 800%
    )
  )
);

h1 {
  @include typography(h1);
}
h2 {
   @include typography(h1);
}
div {
  @include typography(jumbo);
}

SassMeister-output.css

h1 {
  font-size: 180%;
  line-height: 1.2;
  margin: 5rem 0 10rem;
}
@media (min-width: 45em) {
  h1 {
    font-size: 200%;
  }
}
@media (min-width: 60em) {
  h1 {
    margin-top: 0;
  }
}

h2 {
  font-size: 180%;
  line-height: 1.2;
  margin: 5rem 0 10rem;
}
@media (min-width: 45em) {
  h2 {
    font-size: 200%;
  }
}
@media (min-width: 60em) {
  h2 {
    margin-top: 0;
  }
}

div {
  font-size: 300%;
}
@media (min-width: 27em) {
  div {
    font-size: 400%;
  }
}
@media (min-width: 45em) {
  div {
    font-size: 500%;
  }
}
@media (min-width: 60em) {
  div {
    letter-spacing: 0.5rem;
    font-size: 800%;
  }
}

SassMeister-rendered.html

<h1>Responsive</h1>

<div>Typography</div>