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>
<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.1)
// Compass (v0.13.alpha.10)
// ----

@import "compass/typography";
  
$base-font-size: 22px;
$base-line-height: 33px;
$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 1em;
}

h1 {
  @include adjust-font-size-to(50px);
  @include margin-leader(1, 50px);
  color: tomato;
}
h2 {
  @include adjust-font-size-to(40px);
  color: complement(tomato);
}
p {
  @include margin-trailer;
}

SassMeister-output.css

html {
  font-size: 137.5%;
  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 1em;
}

h1 {
  font-size: 50px;
  font-size: 2.27273rem;
  line-height: 66px;
  line-height: 3rem;
  margin-top: 33px;
  margin-top: 1.5rem;
  color: tomato;
}

h2 {
  font-size: 40px;
  font-size: 1.81818rem;
  line-height: 66px;
  line-height: 3rem;
  color: #47e3ff;
}

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

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>
<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>