Generated by SassMeister.com. Gist shared, don't delete.

SassMeister-input-HTML.html

<pre>
  // Firefox 30.0 Linux
  html {
    font-size: 93.75%;
    -webkit-text-size-adjust: 100%;
  }
</pre>

SassMeister-input.scss

// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----

@charset "UTF-8";

/** 
* ==============================================================================
* Typesettings
* ==============================================================================
* A Sass toolkit that sets type in Ems based on modular scale, vertical rhythm,
* and responsive ratio based headlines. Oh, and pixel borders that maintain
* rhythm.
*
* Release Versions: https://github.com/ianrose/typesettings/releases
* Github: https://github.com/ianrose/typesettings
* License: The MIT License (MIT)
*
* Inspired by and used stuff from:
* https://github.com/typeplate/typeplate.github.io
* https://github.com/csswizardry/typecsset
*/

//==============================================================================
// Config Variables
//==============================================================================
// The config variables have default values that are just looking to be adjusted.
// Use this variables to customize your Typesettings. Or take the whole thing
// apart if you want :)

// Font families and default text color.
$font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
$font-serif: Georgia, 'Times New Roman', serif !default;
$font-mono: 'Lucida Console', Monaco, monospace !default;
$text-color: #000 !default;

// The vertical grid unit. Margin, padding, and line-height are set to multiples
// of this value. This is the value that determines the baseline for our vertical
// rhythm. The default value of 6px allows more fine tuned designs that still
// obey vertical rhythm.
$base-vertical-unit: 6px !default;

// The value that multiplies the $base-vertical-unit to get the $base-line-height.
// This gives type an ideal line-height.
$base-line-multi: 4 !default;

// Base font size in pixels.
$base-font-size: 15px !default;

// Modular scale ratio that is used to figure out all the different font sizes
$ms-ratio: 1.414 !default;

// [1] Paragraph setting that you can turn on or off the indent of the first line
// of a new paragraph.
// [2] Paragraph setting that you can turn on or off to have your paragraphs ragged
// right or justified.
$paragraph-indent: true !default; // [1]
$paragraph-justify: true !default; // [2]

// You can optionally load type styles that use Typesettings.
$load-typesetted: true !default;

//==============================================================================
// Internal Variables
//==============================================================================
// It's Best not to adjust the internal variables directly.[Note]

// Converts the $base-font-size value to EMs
$base-em-font-size: ($base-font-size / 16px) * 1em !default;

// Generates modular scale values in Ems. [Note]If you need more size up and/or down
// then add more sizes.
// [1] One step down in the modular scale in EMs
// [2] Two steps down in the modular scale in EMs
// [3] Three steps down in the modular scale in EMs
// [4] One step up in the modular scale in EMs
// [5] Two steps up in the modular scale in EMs
// [6] Three steps up in the modular scale in EMs
// [7] Four steps up in the modular scale in EMs
$ms-down1: $base-em-font-size / $ms-ratio; // [1]
$ms-down2: $ms-down1 /$ms-ratio; // [2]
$ms-down3: $ms-down2 / $ms-ratio; // [3]
$ms-up1: $base-em-font-size * $ms-ratio; // [4]
$ms-up2: $ms-up1 * $ms-ratio; // [5]
$ms-up3: $ms-up2 * $ms-ratio; // [6]
$ms-up4: $ms-up3 * $ms-ratio; // [7]

// Creates a unitless line-height that is based on typographic ideals and
// maintains vertical rhythm.
$base-line-height: ($base-vertical-unit * $base-line-multi) / $base-font-size;

//==============================================================================
// Helper function(s)
//==============================================================================

// Returns a number without a unit. For example 16px becomes 16
@function stripUnits($number) {
  @return $number / ($number * 0 + 1);
}

// Returns an EM value. For example 24px becomes 1.5em
@function emCalc($target, $context: $base-font-size) {
  @return stripUnits(($target / $context)) + 0em;
}

// Returns an EM value that is a multiple of our defined base vertical unit. For 
// example 3 becomes 1.125em
@function emRhythm($lines: $base-vertical-unit, $font-size: $base-em-font-size) {
  @return (stripUnits($lines) * stripUnits($base-vertical-unit)) / (stripUnits($font-size) * stripUnits($base-font-size)) + 0em;
}

// Returns a unitless number that is a multiple of our defined base vertical unit.
// For example 3 becomes 1.125
@function unitlessRhythm($lines: $base-vertical-unit, $font-size: $base-em-font-size) {
  @return ($lines * stripUnits($base-vertical-unit)) / (stripUnits($font-size) * stripUnits($base-font-size));
}

//==============================================================================
// Mixin(s)
//==============================================================================
// Finally, the tools that you can use throughout your project to set
// all the wonderful type related stuffs.

// Sets the type in EMs and makes a vertical rhythm unitless line-height that is
// based on context.
@mixin setType($lines: $base-line-multi, $font-size: $base-em-font-size) {
  font-size: $font-size;
  line-height: unitlessRhythm($lines, $font-size);
}

// Creates a vertical rhythm unitless line-height that is based on context
@mixin setLeading($lines: $base-line-multi, $font-size: $base-em-font-size) {
  line-height: unitlessRhythm($lines, $font-size);
}

// Creates a pixel width border top with padding that is a multiple of the base
// vertical grid unit. You will need to set border style and color rules.
@mixin rhythmBorderTop($border-width: 1px, $lines: $base-line-multi, $font-size: $base-em-font-size) {
  border-top-width: $border-width;
  padding-top: (($lines * stripUnits($base-vertical-unit)) - stripUnits($border-width)) / (stripUnits($font-size) * stripUnits($base-font-size)) + 0em;
}

// Creates a pixel width border bottom with padding that is a multiple of the base
// vertical grid unit. You will need to set border style and color rules.
@mixin rhythmBorderBottom($border-width: 1px, $lines: $base-line-multi, $font-size: $base-em-font-size) {
  border-bottom-width: $border-width;
  padding-bottom: (($lines * stripUnits($base-vertical-unit)) - stripUnits($border-width)) / (stripUnits($font-size) * stripUnits($base-font-size)) + 0em;
}

// Creates a pixel width border with padding that is a multiple of the base
// vertical grid unit. You will need to set border style and color rules.
@mixin rhythmBorder($border-width: 1px, $lines: $base-line-multi, $font-size: $base-em-font-size) {
  border-width: $border-width;
  padding: (($lines * stripUnits($base-vertical-unit)) - stripUnits($border-width)) / (stripUnits($font-size) * stripUnits($base-font-size)) + 0em;
}

@if $load-typesetted {
  //==============================================================================
  // Default Type Styles
  //==============================================================================

  // [1] Sets the font-size of the project as a percentage. Making it easy to scale
  // up/down the whole project for specific media queries
  // [2] Stops iOS from scaling up text.
  html {
    font-size: ($base-font-size / 16px) * 100%; // [1]
    -webkit-text-size-adjust: 100%; // [2]
  }

  body {
    margin: 0;
    padding: 0;
    font-family: $font-serif;
    font-weight: 400;
    line-height: $base-line-height;
    color: $text-color;
  }

  h1, .h1,
  h2, .h2,
  h3, .h3,
  h4, .h4,
  h5, .h5,
  h6, .h6 {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    font-family: $font-sans;
    font-weight: bold;
    text-transform: uppercase;
  }

  // [1] Applies a margin bottom that is a multiple of the vertical grid in EMs.
  // The first argument is the font size context and the second is multiple of the
  // vertical grid unit.
  // [2] Sets the type to one of the modular scale values and the second argument
  // sets a unitless line-height as a multiple of the vertical grid.
  // [3] A generic media query for tablet size ranges.
  // [4] Applies a margin bottom that is the same vertical grid value as the mobile
  // first rule.
  // [5] Sets the type to one of the modular scale values and the second argument
  // sets a unitless line-height as a multiple of the vertical grid.
  h1, .h1 {
    margin-bottom: emRhythm(4, $ms-up2); // [1]
    @include setType(6, $ms-up2); // [2]

    @media (min-width: 43.75em) {
      // [3]
      margin-bottom: emRhythm(4, $ms-up3); // [4]
      @include setType(8, $ms-up3); // [5]
    }

    @media (min-width: 56.25em) {
      margin-bottom: emRhythm(4, $ms-up4);
      @include setType(10, $ms-up4);
    }
  }

  h2, .h2 {
    margin-bottom: emRhythm(4, $ms-up1);
    @include setType(5, $ms-up1);

    @media (min-width: 43.75em) {
      margin-bottom: emRhythm(4, $ms-up2);
      @include setType(6, $ms-up2)
    }

    @media (min-width: 56.25em) {
      margin-bottom: emRhythm(4, $ms-up3);
      @include setType(8, $ms-up3);
    }
  }

  h3, .h3 {
    margin-bottom: emRhythm(4, $ms-up1);
    @include setType(5, $ms-up1);

    @media (min-width: 56.25em) {
      margin-bottom: emRhythm(4, $ms-up2);
      @include setType(6, $ms-up2);
    }
  }

  h4, .h4 {
    margin-bottom: emRhythm(4, $ms-up1);
    @include setType(5, $ms-up1);
  }

  h5, .h5,
  h6, .h6 {
    margin-bottom: emRhythm(4);
    @include setType(4);
  }

  p {
    margin-top: 0;
    margin-bottom: emRhythm(4);
    padding-top: 0;
    padding-bottom: 0;
    max-width: emRhythm(96);
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word;

    @media (min-width: 43.75em) {
      @if $paragraph-justify {
        text-align: justify;
      }
    }
  }

  @if $paragraph-indent {
    p + p {
      margin-top: emRhythm(-4);
      text-indent: emRhythm(4);
    }
  }

  small,
  .font-small {
    @include setType(3, $ms-down1);
  }

  em {
    font-style: italic;
  }

  strong {
    font-weight: bold;
  }

  blockquote {
    margin-top: emRhythm(4);
    margin-bottom: emRhythm(4);
    margin-left: emRhythm(-5);
    padding-top: 0;
    padding-bottom: 0;
    padding-left: emRhythm(4);
    border-left: $base-vertical-unit solid lighten(#000, 50%);
    font-family: $font-mono;
    font-weight: bold;

    footer {
      cite {
        &:before {
          content: " – ";
        }
      }
    }
  }

  pre,
  code {
    font-family: $font-mono;
  }

  time,
  .time {
    text-transform: uppercase;
  }

  ol,
  ul,
  dl {
    margin-top: 0;
    margin-bottom: emRhythm(4);
    margin-left: emRhythm(4);
    padding-top: 0;
    padding-bottom: 0;
  }

  ul ul,
  ol ol,
  dl dl {
    margin-left: 0;
  }

  ul {
    list-style: disc;
  }

  ol {
    list-style: decimal;
  }

  // [1] https://developer.mozilla.org/en-US/docs/CSS/font-variant
  abbr {
    font-variant: small-caps; // [1]
    font-weight: 600;
    text-transform: lowercase;
  }

  // Cursor changed to a question mark when it has a title
  abbr[title]:hover {
    cursor: help;
  }

  // Creates horizontal rules that obey the baseline.
  // [1] Zero outs the user agent border
  hr {
    margin-top: emRhythm(4);
    margin-bottom: 0;
    border: none; // [1]
    border-top-color: $text-color;
    border-top-style: solid;
    @include rhythmBorderTop(1px, 4);
  }
}

SassMeister-output.css

@charset "UTF-8";
/** 
* ==============================================================================
* Typesettings
* ==============================================================================
* A Sass toolkit that sets type in Ems based on modular scale, vertical rhythm,
* and responsive ratio based headlines. Oh, and pixel borders that maintain
* rhythm.
*
* Release Versions: https://github.com/ianrose/typesettings/releases
* Github: https://github.com/ianrose/typesettings
* License: The MIT License (MIT)
*
* Inspired by and used stuff from:
* https://github.com/typeplate/typeplate.github.io
* https://github.com/csswizardry/typecsset
*/
html {
  font-size: 93.75%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.6;
  color: black;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
}

h1, .h1 {
  margin-bottom: 0.85359em;
  font-size: 1.87443em;
  line-height: 1.28039;
}
@media (min-width: 43.75em) {
  h1, .h1 {
    margin-bottom: 0.60367em;
    font-size: 2.65045em;
    line-height: 1.20734;
  }
}
@media (min-width: 56.25em) {
  h1, .h1 {
    margin-bottom: 0.42692em;
    font-size: 3.74774em;
    line-height: 1.06731;
  }
}

h2, .h2 {
  margin-bottom: 1.20698em;
  font-size: 1.32562em;
  line-height: 1.50872;
}
@media (min-width: 43.75em) {
  h2, .h2 {
    margin-bottom: 0.85359em;
    font-size: 1.87443em;
    line-height: 1.28039;
  }
}
@media (min-width: 56.25em) {
  h2, .h2 {
    margin-bottom: 0.60367em;
    font-size: 2.65045em;
    line-height: 1.20734;
  }
}

h3, .h3 {
  margin-bottom: 1.20698em;
  font-size: 1.32562em;
  line-height: 1.50872;
}
@media (min-width: 56.25em) {
  h3, .h3 {
    margin-bottom: 0.85359em;
    font-size: 1.87443em;
    line-height: 1.28039;
  }
}

h4, .h4 {
  margin-bottom: 1.20698em;
  font-size: 1.32562em;
  line-height: 1.50872;
}

h5, .h5,
h6, .h6 {
  margin-bottom: 1.70667em;
  font-size: 0.9375em;
  line-height: 1.70667;
}

p {
  margin-top: 0;
  margin-bottom: 1.70667em;
  padding-top: 0;
  padding-bottom: 0;
  max-width: 40.96em;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
  word-wrap: break-word;
}
@media (min-width: 43.75em) {
  p {
    text-align: justify;
  }
}

p + p {
  margin-top: -1.70667em;
  text-indent: 1.70667em;
}

small,
.font-small {
  font-size: 0.66301em;
  line-height: 1.80992;
}

em {
  font-style: italic;
}

strong {
  font-weight: bold;
}

blockquote {
  margin-top: 1.70667em;
  margin-bottom: 1.70667em;
  margin-left: -2.13333em;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 1.70667em;
  border-left: 6px solid gray;
  font-family: "Lucida Console", Monaco, monospace;
  font-weight: bold;
}
blockquote footer cite:before {
  content: " – ";
}

pre,
code {
  font-family: "Lucida Console", Monaco, monospace;
}

time,
.time {
  text-transform: uppercase;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1.70667em;
  margin-left: 1.70667em;
  padding-top: 0;
  padding-bottom: 0;
}

ul ul,
ol ol,
dl dl {
  margin-left: 0;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

abbr {
  font-variant: small-caps;
  font-weight: 600;
  text-transform: lowercase;
}

abbr[title]:hover {
  cursor: help;
}

hr {
  margin-top: 1.70667em;
  margin-bottom: 0;
  border: none;
  border-top-color: black;
  border-top-style: solid;
  border-top-width: 1px;
  padding-top: 1.63556em;
}

SassMeister-rendered.html

<pre>
  // Firefox 30.0 Linux
  html {
    font-size: 93.75%;
    -webkit-text-size-adjust: 100%;
  }
</pre>