Generated by SassMeister.com.

SassMeister-input-HTML.html

<h1>This Is An H1</h1>
<h2>This Is An H2</h2>
<h3>This Is An H3</h3>
<h4>This Is An H4</h4>
<p>Nunc et suscipit lectus. Quisque mattis nisi et dui tristique, nec fringilla turpis luctus. Fusce faucibus mauris ut suscipit aliquet. Sed auctor facilisis odio, at eleifend libero aliquet quis. Integer tempor enim at odio fermentum tincidunt ultrices vel nisi. Vestibulum fermentum purus non hendrerit malesuada. Nunc laoreet justo eget dolor cursus, sed malesuada velit mattis. Aliquam non justo tristique, aliquam mauris at, lacinia mauris. Aliquam feugiat erat sed risus ultricies interdum. Quisque eget tellus egestas, luctus dolor id, tincidunt purus. Mauris tincidunt ligula nec volutpat varius. Etiam semper, erat a eleifend pulvinar, diam augue rhoncus lectus, in commodo nunc ligula ut diam. Aliquam tincidunt massa vel neque laoreet aliquam at sit amet lacus.</p>
<p> Donec scelerisque molestie nisi vitae convallis. Mauris a mauris ac tortor sagittis tempor et semper erat. Nunc placerat tortor quis enim vehicula, sit amet pulvinar lacus mollis. </p>

SassMeister-input.scss

// ----
// Sass (v3.3.12)
// Compass (v1.0.0.alpha.21)
// Modular Scale (v2.0.5)
// Normalize SCSS (v3.0.0.alpha.2)
// ----

@import "normalize-scss";
@import "compass";
@import "modular-scale";

$base-font-size: 16px;
$rem-base: 16px;

@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

@function rem-calc($values, $base-value: $rem-base) {
  $max: length($values);
  @if $max == 1 { @return convert-to-rem(nth($values, 1), $base-value); }
  $remValues: ();
  @for $i from 1 through $max {
    $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));
  }
  @return $remValues;
}

@function convert-to-rem($value, $base-value: $rem-base)  {
  $value: strip-unit($value) / strip-unit($base-value) * 1rem;
  @if ($value == 0rem) { $value: 0; } // Turn 0rem into 0
  @return $value;
}

$base-line-height: rem-calc(20);
$ms-ratio: $double-octave;

$ms-base-size: rem-calc($base-font-size);
$base-size: ms(1);
$h4-size: ms(2);
$h3-size: ms(3);
$h2-size: ms(4);
$h1-size: ms(5);

$round-to-nearest-half-line: true;
$rhythm-unit: 'rem';
@include establish-baseline;

h1,
h2,
h3,
h4,
h5,
h6
{
 margin: 0;
 padding: 0;
}


h1
{
  @include adjust-font-size-to($h1-size);
}

h2
{
  @include adjust-font-size-to($h2-size);
}

h3
{
  @include adjust-font-size-to($h3-size);
}

h4
{
  @include adjust-font-size-to($h4-size);
}

p
{
  @include adjust-font-size-to($base-size);
  max-width: 32em;
}

SassMeister-output.css

Undefined variable: "$base-size".

SassMeister-rendered.html

<h1>This Is An H1</h1>
<h2>This Is An H2</h2>
<h3>This Is An H3</h3>
<h4>This Is An H4</h4>
<p>Nunc et suscipit lectus. Quisque mattis nisi et dui tristique, nec fringilla turpis luctus. Fusce faucibus mauris ut suscipit aliquet. Sed auctor facilisis odio, at eleifend libero aliquet quis. Integer tempor enim at odio fermentum tincidunt ultrices vel nisi. Vestibulum fermentum purus non hendrerit malesuada. Nunc laoreet justo eget dolor cursus, sed malesuada velit mattis. Aliquam non justo tristique, aliquam mauris at, lacinia mauris. Aliquam feugiat erat sed risus ultricies interdum. Quisque eget tellus egestas, luctus dolor id, tincidunt purus. Mauris tincidunt ligula nec volutpat varius. Etiam semper, erat a eleifend pulvinar, diam augue rhoncus lectus, in commodo nunc ligula ut diam. Aliquam tincidunt massa vel neque laoreet aliquam at sit amet lacus.</p>
<p> Donec scelerisque molestie nisi vitae convallis. Mauris a mauris ac tortor sagittis tempor et semper erat. Nunc placerat tortor quis enim vehicula, sit amet pulvinar lacus mollis. </p>