Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="module">
  <h1 class="module-heading">Heading 1</h1>
  <p class="module-text">Lorem ipsum <a href="#" class="module-link">dolor</a> sit amet, consectetur adipisicing elit. Aspernatur, sunt, nesciunt, repudiandae accusantium nihil obcaecati beatae amet ipsam perspiciatis repellat inventore fugit impedit eaque velit voluptatum atque unde sequi minus.</p>
  <p class="module-text">Impedit, <a href="#" class="module-link">eveniet</a>, cum, fugiat reiciendis molestias iusto magni laboriosam saepe ut vel quia illo labore animi quidem repellat sunt enim itaque eos corrupti hic! Ea esse nihil nam rerum deserunt?</p>
  <p class="module-text"><a href="#" class="module-link">Accusamus</a>, aperiam, nisi autem facere veritatis dignissimos cumque iste illum velit minus tempora numquam libero blanditiis atque ducimus adipisci omnis ex provident tenetur aliquam non expedita suscipit pariatur deserunt soluta.</p>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.3)
// Compass (v1.0.0.alpha.18)
// ----

$hopbush: #c69;
$patina: #699;
$pale-sky: #6b717f;
$nebula: #d2e1dd;

$font-head: "PT Sans Caption", Helvetica, sans-serif;
$font-text: "PT Serif", Georgia, serif;

$context-width: 600px; 

@mixin box-sizing($box) {
  -webkit-box-sizing: $box;
  -moz-box-sizing: $box;
  box-sizing: $box;
}

%heading1 { font-size: 3,75em; }
%paragraph { font-size: 1.3125em; }

body {
  font-size: 60%;
  line-height: 1.618;
  color: darken($pale-sky, 15%);
  @media screen and (min-width: 480px) {
    font-size: 75%;
  }
  @media screen and (min-width: 640px) {
    font-size: 100%;
  }
}

.module {
  background: lighten($patina, 40%);
  max-width: $context-width;
  margin: auto;
  padding: .5em 1em;
  border: 1px solid $patina;
  @include box-sizing(border-box);
  border-radius: 3px;
  border: 1px solid $patina;
  
  &-heading {
    @extend %heading1;
    font-family: $font-head;
    font-weight: 400;
    color: $patina;
  }
  &-text {
    @extend %paragraph;
    font-family: $font-text;
  }
  &-link {
    text-decoration: none;
    color: $hopbush;
    &:hover {
      text-decoration: underline;
    }
  }
}

SassMeister-output.css

.module-heading {
  font-size: 3,75em;
}

.module-text {
  font-size: 1.3125em;
}

body {
  font-size: 60%;
  line-height: 1.618;
  color: #484c55;
}
@media screen and (min-width: 480px) {
  body {
    font-size: 75%;
  }
}
@media screen and (min-width: 640px) {
  body {
    font-size: 100%;
  }
}

.module {
  background: #e0ebeb;
  max-width: 600px;
  margin: auto;
  padding: .5em 1em;
  border: 1px solid #669999;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 3px;
  border: 1px solid #669999;
}
.module-heading {
  font-family: "PT Sans Caption", Helvetica, sans-serif;
  font-weight: 400;
  color: #669999;
}
.module-text {
  font-family: "PT Serif", Georgia, serif;
}
.module-link {
  text-decoration: none;
  color: #cc6699;
}
.module-link:hover {
  text-decoration: underline;
}

SassMeister-rendered.html

<div class="module">
  <h1 class="module-heading">Heading 1</h1>
  <p class="module-text">Lorem ipsum <a href="#" class="module-link">dolor</a> sit amet, consectetur adipisicing elit. Aspernatur, sunt, nesciunt, repudiandae accusantium nihil obcaecati beatae amet ipsam perspiciatis repellat inventore fugit impedit eaque velit voluptatum atque unde sequi minus.</p>
  <p class="module-text">Impedit, <a href="#" class="module-link">eveniet</a>, cum, fugiat reiciendis molestias iusto magni laboriosam saepe ut vel quia illo labore animi quidem repellat sunt enim itaque eos corrupti hic! Ea esse nihil nam rerum deserunt?</p>
  <p class="module-text"><a href="#" class="module-link">Accusamus</a>, aperiam, nisi autem facere veritatis dignissimos cumque iste illum velit minus tempora numquam libero blanditiis atque ducimus adipisci omnis ex provident tenetur aliquam non expedita suscipit pariatur deserunt soluta.</p>
</div>