Generated by SassMeister.com.

SassMeister-input-HTML.html

<h1>HTML Ipsum Presents</h1>
	       
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>
	       
<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>#header h1 a { 
	display: block; 
	width: 300px; 
	height: 80px; 
}</code></pre>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

$base-font-size: 16px;
$base-line-height: 24px;
$base-spacing-unit: $base-line-height;

@mixin font-size($font-size, $line-height: auto) {
  font-size: $font-size;
  font-size: ($font-size / $base-font-size) * 1rem;

  @if $line-height == auto {
    line-height: ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
  }

  @else {

    @if (type-of($line-height) == number or $line-height == inherit or $line-height == normal) {
      line-height: $line-height;
    }

    @elseif ($line-height != none and $line-height != false) {
      @warn "D’oh! ‘#{$line-height}’ is not a valid value for `line-height`."
    }

  }

}

* {
  margin:  0;
  padding: 0;
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6,
ul, ol, dl,
blockquote, p, address,
hr,
table,
fieldset, figure,
pre,
%margin-bottom {
    margin-bottom: $base-spacing-unit;
    margin-bottom: ($base-spacing-unit / $base-font-size) * 1rem;
}


html {
  font-size: ($base-font-size / 16px) * 1em;
  line-height: $base-line-height / $base-font-size;
}

h1, h2, h3, h4, h5, h6 {
  @include font-size(32px);
}

p {
  @include font-size(12px);
}









.u-mb {
  margin-bottom: $base-spacing-unit !important;
}
.u-mb\+\+ {
  margin-bottom: round(2 * $base-spacing-unit) !important;
}
.u-mb-- {
  margin-bottom: round(0.5 * $base-spacing-unit) !important;
}

SassMeister-output.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6,
ul, ol, dl,
blockquote, p, address,
hr,
table,
fieldset, figure,
pre {
  margin-bottom: 24px;
  margin-bottom: 1.5rem;
}

html {
  font-size: 1em;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 32px;
  font-size: 2rem;
  line-height: 1.5;
}

p {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 2;
}

.u-mb {
  margin-bottom: 24px !important;
}

.u-mb\+\+ {
  margin-bottom: 48px !important;
}

.u-mb-- {
  margin-bottom: 12px !important;
}

SassMeister-rendered.html

<h1>HTML Ipsum Presents</h1>
	       
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>
	       
<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>#header h1 a { 
	display: block; 
	width: 300px; 
	height: 80px; 
}</code></pre>