Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.3.6)
// ----

/**
 * Responsive Typography Example
 *
 * Read the full post here:
 * http://www.liquidlight.co.uk/blog/article/responsive-typography-in-scss/
 */


@import "mq";

// Declare breakpoints for sass-mq.
$mq-breakpoints: (
  phone: 20em,
  tablet: 40em,
  desktop: 60em
);

// Propvalue mixin
//
// Loops through a map and outputs each key/value 
// as a css property/value.
@mixin propValue($map) {
	@each $prop, $value in $map {
		#{$prop}: #{$value};
	}
}

// Typography mixin
//
// Gets the designated style name and outputs any
// key/values set in the “base”. After that, it loops
// through the media queries and sets up the 
// responsive typography
@mixin typography($element) {
	$map: map-get($typography, $element);
	$base: map-get($map, base);
	@include propValue($base);
	$mq: map-remove($map, base);
	@each $bp, $attr in $mq {
		@include mq($bp) {
			@include propValue($attr);
		}
	}
}

// Typography
$typography: (
	mega: (
		base: (
			font-size: 210%,
			font-weight: 300,
			letter-spacing: -0.5px,
			line-height: 1.1
		),
		tablet: (
			font-size: 290%
		),
		desktop: (
			font-size: 375%,
		)
	),
	h1: (
		base: (
			font-size: 250%,
			font-weight: 300,
			line-height: 1.1,
			letter-spacing: -0.5px,
		),
		desktop: (
			font-size: 320%
		)
	),
	h2: (
		base: (
			font-size: 175%,
			letter-spacing: -1.5px
		),
		tablet: (
			font-size: 187%
		)
	),
	h3: (
		base: (
			font-size: 150%,
			letter-spacing: -1px
		),
		tablet: (
			font-size: 160%
		)
	),
	h4: (
		base: (
			font-size: 140%,
			letter-spacing: -1px
		)
	),
	h5: (
		base: (
			font-size: 112.5%,
			font-weight: bold,
		)
	),
	h6: (
		base: (
			font-size: 112.5%,
		)
	),
	p: (
		base: (
			line-height: 1.4em,
			font-size: 106%
		),
		tablet: (
			font-size: 112.5%
		)
	)
);

h1 {
  @include typography(h1);
}
h2 {
  @include typography(h2);
}
h3 {
  @include typography(h3);
}
h4 {
  @include typography(h4);
}
.heading {
  @include typography(mega);
}

SassMeister-output.css

/**
 * Responsive Typography Example
 *
 * Read the full post here:
 * http://www.liquidlight.co.uk/blog/article/responsive-typography-in-scss/
 */
h1 {
  font-size: 250%;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

@media (min-width: 60em) {
  h1 {
    font-size: 320%;
  }
}

h2 {
  font-size: 175%;
  letter-spacing: -1.5px;
}

@media (min-width: 40em) {
  h2 {
    font-size: 187%;
  }
}

h3 {
  font-size: 150%;
  letter-spacing: -1px;
}

@media (min-width: 40em) {
  h3 {
    font-size: 160%;
  }
}

h4 {
  font-size: 140%;
  letter-spacing: -1px;
}

.heading {
  font-size: 210%;
  font-weight: 300;
  letter-spacing: -0.5px;
  line-height: 1.1;
}

@media (min-width: 40em) {
  .heading {
    font-size: 290%;
  }
}

@media (min-width: 60em) {
  .heading {
    font-size: 375%;
  }
}