Generated by SassMeister.com.

SassMeister-input-HTML.html

<div><link href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic" rel="stylesheet"></div>

<div><style>body { font-family: "PT Sans"; color: #33373a; background: #ffffff}</style></div>

<h1>Kitsch retro</h1>
<h2>Typewriter delectus cred</h2>
<p>Bushwick Schlitz. Est Shoreditch small batch, dolor Schlitz sapiente twee stumptown ex. Duis Carles pickled, cornhole Thundercats McSweeney's minim PBR vegan Tumblr irony. Kogi eu Thundercats, sed scenester before they sold out et aesthetic. Elit cred Vice ethical pickled sartorial. Stumptown roof party freegan High Life vero, ea sed minim meggings.</p>

<h3>Truffaut disrupt sartorial deserunt</h3>

<p>Cosby sweater plaid shabby chic kitsch pour-over ex. Try-hard fanny pack mumblecore cornhole cray scenester. Assumenda narwhal occupy, Blue Bottle nihil culpa fingerstache. Meggings kogi vinyl meh, food truck banh mi Etsy magna 90's duis typewriter banjo organic leggings Vice.</p>

<h4>Fingerstache nesciunt lomo nostrud hoodie</h4>

<ul>
<li>Roof party put a bird on it incididunt sed umami craft beer cred.</li>
<li>Carles literally normcore, Williamsburg Echo Park fingerstache photo booth twee keffiyeh chambray whatever.</li>
<li>Scenester High Life Banksy, proident master cleanse tousled squid sriracha ad chillwave post-ironic retro.</li>
</ul>

<p>Laboris selfies occaecat umami, forage Tumblr American Apparel. Retro Terry Richardson culpa id swag polaroid Intelligentsia American Apparel eu, esse non post-ironic fugiat master cleanse. Direct trade gluten-free blog, fanny pack cray labore skateboard before they sold out adipisicing non magna id Helvetica freegan. Disrupt aliqua Brooklyn church-key lo-fi dreamcatcher.</p>

SassMeister-input.scss

// ----
// libsass (v3.1.0-beta)
// ----

@import "breakpoint";

$base-font-size : 1rem;
$base-line-height : 1.25rem;
$base-typography : (
  x-large : (
    font-size : 3rem,
    lines : 3,
    leader : 2,
    trailer : 1
  ),
  large : (
    font-size : 2.0625rem,
    lines : 2,
    leader : 2,
    trailer : 1
  ),
  medium : (
    font-size : 1.4375rem,
    lines : 2,
    leader : 1,
    trailer : 1
  ),
  default : (
    font-size : 1rem,
    lines : 1,
    leader : 1,
    trailer : 1
  ),
  small : (
    font-size: 0.5rem,
    lines : 1,
    leader : 1,
    trailer : 1
  )
);

@mixin calc-typescale($heading-map) {
  // calculate the type scales for breakpoints.
}

@mixin get-heading($heading-map, $space-type : 'margin') {
  font-size: map-get($heading-map, font-size);
  line-height: $base-line-height * map-get($heading-map, lines);
  #{$space-type}-bottom: $base-line-height * map-get($heading-map, trailer);
  #{$space-type}-top: $base-line-height * map-get($heading-map, leader);
  // calculate the 
}

body {
 
}

h1 {
  @include get-heading(map-get($base-typography, x-large));
}
h2 {
  @include get-heading(map-get($base-typography, large));
}
h3 {
  @include get-heading(map-get($base-typography, medium));
}
h4 {
  @include get-heading(map-get($base-typography, default));
}
p,
ol,
ul {
  @include get-heading(map-get($base-typography, default));
}
// $h1-font-size: 7rem;
// $h1-line: 1.25rem;
// $h1-lines: 6;
// $h1-line-height: $h1-line * $h1-lines;
// $h1-margin-top: 2 * $h1-line;
// $h1-margin-bottom: 1 * $h1-line;

// $h2-font-size: 3.5rem;
// $h2-line: 1.25rem;
// $h2-lines: 3;
// $h2-line-height: $h2-line * $h2-lines;
// $h2-margin-top: 2 * $h2-line;
// $h2-margin-bottom: 1 * $h2-line;

// $h3-font-size: 1.75rem;
// $h3-line: 1.25rem;
// $h3-lines: 2;
// $h3-line-height: $h3-line * $h3-lines;
// $h3-margin-top: 1 * $h3-line;
// $h3-margin-bottom: 1 * $h3-line;

// $h4-font-size: 0.875rem;
// $h4-line: 1.25rem;
// $h4-lines: 1;
// $h4-line-height: $h4-line * $h4-lines;
// $h4-margin-top: 1 * $h4-line;
// $h4-margin-bottom: 1 * $h4-line;

SassMeister-output.css

@media (min-width: 0) {
  body::before {
    content: '{ "current" : "small", "all" : [small], "position" : 0 }';
    display: none; } }

/*! Grid based on https://github.com/necolas/griddle by Nicolas Gallagher (@necolas) */
body {
  font-size: 1em; }

.wrapper {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25em;
  padding-right: 1.25em; }

img {
  max-width: 100%; }

.no-js .responsive-image {
  display: none; }

.grid {
  display: block;
  padding: 0;
  margin: 0 -0.625em;
  text-align: left;
  letter-spacing: -0.31em;
  text-rendering: optimizespeed; }

.opera:-o-prefocus, .grid {
  word-spacing: -0.43em; }

.grid > .grid {
  overflow: hidden;
  margin-right: 0;
  margin-left: 0; }

.grid__cell {
  width: 100%;
  display: -moz-inline-stack;
  display: inline-block;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0 0.625em;
  /* controls vertical positioning of units */
  vertical-align: top;
  /* keeps unit content correctly aligned */
  text-align: left;
  /* reset text defaults */
  letter-spacing: normal;
  word-spacing: normal;
  text-rendering: auto; }

.grid--center {
  text-align: center; }

.grid__cell--center {
  display: block;
  margin: 0 auto; }

h1 {
  font-size: 3rem;
  line-height: 3.75rem;
  margin-bottom: 1.25rem;
  margin-top: 2.5rem; }

h2 {
  font-size: 2.0625rem;
  line-height: 2.5rem;
  margin-bottom: 1.25rem;
  margin-top: 2.5rem; }

h3 {
  font-size: 1.4375rem;
  line-height: 2.5rem;
  margin-bottom: 1.25rem;
  margin-top: 1.25rem; }

h4 {
  font-size: 1rem;
  line-height: 1.25rem;
  margin-bottom: 1.25rem;
  margin-top: 1.25rem; }

p, ol, ul {
  font-size: 1rem;
  line-height: 1.25rem;
  margin-bottom: 1.25rem;
  margin-top: 1.25rem; }

SassMeister-rendered.html

<div><link href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic" rel="stylesheet"></div>

<div><style>body { font-family: "PT Sans"; color: #33373a; background: #ffffff}</style></div>

<h1>Kitsch retro</h1>
<h2>Typewriter delectus cred</h2>
<p>Bushwick Schlitz. Est Shoreditch small batch, dolor Schlitz sapiente twee stumptown ex. Duis Carles pickled, cornhole Thundercats McSweeney's minim PBR vegan Tumblr irony. Kogi eu Thundercats, sed scenester before they sold out et aesthetic. Elit cred Vice ethical pickled sartorial. Stumptown roof party freegan High Life vero, ea sed minim meggings.</p>

<h3>Truffaut disrupt sartorial deserunt</h3>

<p>Cosby sweater plaid shabby chic kitsch pour-over ex. Try-hard fanny pack mumblecore cornhole cray scenester. Assumenda narwhal occupy, Blue Bottle nihil culpa fingerstache. Meggings kogi vinyl meh, food truck banh mi Etsy magna 90's duis typewriter banjo organic leggings Vice.</p>

<h4>Fingerstache nesciunt lomo nostrud hoodie</h4>

<ul>
<li>Roof party put a bird on it incididunt sed umami craft beer cred.</li>
<li>Carles literally normcore, Williamsburg Echo Park fingerstache photo booth twee keffiyeh chambray whatever.</li>
<li>Scenester High Life Banksy, proident master cleanse tousled squid sriracha ad chillwave post-ironic retro.</li>
</ul>

<p>Laboris selfies occaecat umami, forage Tumblr American Apparel. Retro Terry Richardson culpa id swag polaroid Intelligentsia American Apparel eu, esse non post-ironic fugiat master cleanse. Direct trade gluten-free blog, fanny pack cray labore skateboard before they sold out adipisicing non magna id Helvetica freegan. Disrupt aliqua Brooklyn church-key lo-fi dreamcatcher.</p>