Generated by SassMeister.com.

SassMeister-input-HTML.html

<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed id deserunt fugiat veniam laboriosam perspiciatis perferendis dolores consequatur numquam dicta veritatis maxime nobis eligendi harum illum inventore voluptatibus eaque sunt!</p>
<p>Ea minima nesciunt eaque quaerat laudantium sed accusamus. Tenetur laborum sapiente enim dolor modi ullam pariatur hic quidem saepe at facere nobis. Itaque obcaecati quod cum at minus adipisci ut.</p>
<span>This is some really small metadata type text. This is so awesome, expecially the way tha I am able to manipulate and control vertical rhythm!</span>

<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit vitae alias tempore autem reprehenderit amet impedit quia fugiat. Cupiditate ipsam sed quaerat assumenda fugit nihil architecto tenetur quia! Nobis vitae.</p>
<p>Sit animi beatae nemo porro iusto et tempore incidunt autem officiis debitis distinctio atque veniam voluptas maxime illo dolores aut minima ratione culpa nam at sapiente dignissimos omnis quae molestias.</p>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.5)
// Compass (v1.0.0.alpha.18)
// ----

@import "compass/typography";

$base-font-size: 16px;
$base-line-height: $base-font-size * 1.5;
$rhythm-unit: "rem";
@include establish-baseline;

* {
  margin: 0;
  padding: 0;
}

body {
  @include debug-vertical-alignment;
  font-family: "Proxima Nova", "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
  font-weight: 300;
  padding: 0 2em;
}

h1 {
  @include adjust-font-size-to(36px);
  margin: rhythm(2,36px) 0 0 0;
  color: tomato;
  @include horizontal-borders(1px,1);
}

h2 {
  @include adjust-font-size-to(28px);
  @include padding-leader(1, 28px);
  border:solid 1px green;
  color: complement(tomato);
}

p {
  @include margin-trailer;
}

span {
  @include adjust-font-size-to(12px,2/3);
  @include horizontal-borders(1px);
  border-color:yellow;
  width:200px;
  display:block;
}

SassMeister-output.css

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

* {
  margin: 0;
  padding: 0;
}

body {
  background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
  background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
  -moz-background-size: 100% 1.5rem;
  -o-background-size: 100% 1.5rem;
  -webkit-background-size: 100% 1.5rem;
  background-size: 100% 1.5rem;
  background-position: left top;
  font-family: "Proxima Nova", "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
  font-weight: 300;
  padding: 0 2em;
}

h1 {
  font-size: 36px;
  font-size: 2.25rem;
  line-height: 48px;
  line-height: 3rem;
  margin: 3rem 0 0 0;
  color: tomato;
  border-top-width: 1px;
  border-top-width: 0.0625rem;
  border-top-style: solid;
  padding-top: 23px;
  padding-top: 1.4375rem;
  border-bottom-width: 1px;
  border-bottom-width: 0.0625rem;
  border-bottom-style: solid;
  padding-bottom: 23px;
  padding-bottom: 1.4375rem;
}

h2 {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 48px;
  line-height: 3rem;
  padding-top: 24px;
  padding-top: 1.5rem;
  border: solid 1px green;
  color: #47e3ff;
}

p {
  margin-bottom: 24px;
  margin-bottom: 1.5rem;
}

span {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 16px;
  line-height: 1rem;
  border-top-width: 1px;
  border-top-width: 0.0625rem;
  border-top-style: solid;
  padding-top: 23px;
  padding-top: 1.4375rem;
  border-bottom-width: 1px;
  border-bottom-width: 0.0625rem;
  border-bottom-style: solid;
  padding-bottom: 23px;
  padding-bottom: 1.4375rem;
  border-color: yellow;
  width: 200px;
  display: block;
}

SassMeister-rendered.html

<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed id deserunt fugiat veniam laboriosam perspiciatis perferendis dolores consequatur numquam dicta veritatis maxime nobis eligendi harum illum inventore voluptatibus eaque sunt!</p>
<p>Ea minima nesciunt eaque quaerat laudantium sed accusamus. Tenetur laborum sapiente enim dolor modi ullam pariatur hic quidem saepe at facere nobis. Itaque obcaecati quod cum at minus adipisci ut.</p>
<span>This is some really small metadata type text. This is so awesome, expecially the way tha I am able to manipulate and control vertical rhythm!</span>

<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit vitae alias tempore autem reprehenderit amet impedit quia fugiat. Cupiditate ipsam sed quaerat assumenda fugit nihil architecto tenetur quia! Nobis vitae.</p>
<p>Sit animi beatae nemo porro iusto et tempore incidunt autem officiis debitis distinctio atque veniam voluptas maxime illo dolores aut minima ratione culpa nam at sapiente dignissimos omnis quae molestias.</p>