<div class="container">
  <div class="head">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi obcaecati ex corrupti dolore voluptatibus, placeat animi! Provident saepe quisquam expedita quasi laudantium sequi autem, reprehenderit numquam deserunt quas omnis voluptatem!
  </div>
  <div class="main">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores culpa commodi, aperiam quis hic esse consectetur error vel unde consequuntur cum debitis, provident ullam necessitatibus odit magnam numquam? Blanditiis, repudiandae.</div>
  <div class="footer">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, nemo. Vero impedit veritatis nesciunt labore, nisi id repudiandae maiores adipisci neque dignissimos perspiciatis sapiente possimus praesentium deserunt error exercitationem saepe!</div>
</div>
@mixin p-style($p-size, $p-color) {
  font-size: $p-size;
  line-height: 2em;
  color: $p-color;
  margin: 15px;
}

.head {
  @include p-style(20px, #677962);
}

.main {
  @include p-style(30px, #933962);
}

.footer {
  @include p-style(10px, #946809);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.