Generated by SassMeister.com.

SassMeister-input-HTML.html

<h1>Vulputate Consectetur Vestibulum Quam Dapibus</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde delectus quam debitis dicta modi, laboriosam architecto fuga voluptatibus. Porro eveniet dolores ipsa eum architecto non in temporibus natus magnam perferendis.</p>
<p>Consectetur velit pariatur tempore neque perferendis officiis praesentium error a aliquid, ad delectus quas quidem assumenda id nostrum blanditiis at non soluta aut sed iste accusantium nisi laborum? Consequatur, sint.</p>
<p>Nulla, doloribus, atque. Molestias culpa nostrum eligendi expedita, dolore iure commodi quas velit voluptatem, tempore eveniet eum voluptates veniam deserunt. Pariatur ipsa saepe corrupti aut perspiciatis, rem nulla nihil. Est.</p>
<p>Quidem architecto, totam animi porro quaerat cupiditate ex dolorum cum facere vel. A fugiat cupiditate deserunt reiciendis est odit. Quae laborum, distinctio rerum pariatur autem voluptatem doloribus nostrum dicta libero.</p>
<p>Maxime dignissimos provident, at commodi eius unde accusamus praesentium iste, itaque consequatur, eum ab. Modi assumenda dolor dolorum molestias debitis, provident voluptate. Ex porro mollitia voluptatem hic possimus, quaerat in.</p>

<h2>Parturient Condimentum Commodo Ligula Tristique</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis quas tempore soluta esse ratione sunt, cupiditate quibusdam, libero modi architecto dicta ut, distinctio dolores delectus accusantium laudantium alias. Fugiat, commodi.</p>
<h3>Vehicula Justo Porta Fringilla Cras</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis quas tempore soluta esse ratione sunt, cupiditate quibusdam, libero modi architecto dicta ut, distinctio dolores delectus accusantium laudantium alias. Fugiat, commodi.</p>
<h4>Venenatis Pharetra Cras Risus Malesuada</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis quas tempore soluta esse ratione sunt, cupiditate quibusdam, libero modi architecto dicta ut, distinctio dolores delectus accusantium laudantium alias. Fugiat, commodi.</p>
<h5>Ridiculus Risus Vehicula Ullamcorper Purus</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis quas tempore soluta esse ratione sunt, cupiditate quibusdam, libero modi architecto dicta ut, distinctio dolores delectus accusantium laudantium alias. Fugiat, commodi.</p>

SassMeister-input.scss

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

@import "modular-scale";
$ms-ratio: 1.33;

$ms-range:
  1.1  20em,
  1.333  60em;

$line-height:
  1.1  20em,
  1.4  40em;

body {
  max-width: 40em;
  margin: 0 auto;
  padding: 5% 5% 10%;
  @include ms-respond(line-height,1, $range: $line-height);
}

h1, h2, h3, h4, h5 {
  line-height: 1;
  margin: 0;
}

@for $i from 1 through 5 {
  h#{$i} {
    @include ms-respond(font-size,($i - 5) * -1)
  }
}

SassMeister-output.css

body {
  max-width: 40em;
  margin: 0 auto;
  padding: 5% 5% 10%;
  line-height: 1.1em;
}

@media (min-width: 40em) {
  body {
    line-height: 1.4em;
  }
}

h1, h2, h3, h4, h5 {
  line-height: 1;
  margin: 0;
}

h1 {
  font-size: 1.4641em;
}

@media (min-width: 60em) {
  h1 {
    font-size: 3.15733em;
  }
}

h2 {
  font-size: 1.331em;
}

@media (min-width: 60em) {
  h2 {
    font-size: 2.36859em;
  }
}

h3 {
  font-size: 1.21em;
}

@media (min-width: 60em) {
  h3 {
    font-size: 1.77689em;
  }
}

h4 {
  font-size: 1.1em;
}

@media (min-width: 60em) {
  h4 {
    font-size: 1.333em;
  }
}

h5 {
  font-size: 1em;
}

@media (min-width: 60em) {
  h5 {
    font-size: 1em;
  }
}

SassMeister-rendered.html

<h1>Vulputate Consectetur Vestibulum Quam Dapibus</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde delectus quam debitis dicta modi, laboriosam architecto fuga voluptatibus. Porro eveniet dolores ipsa eum architecto non in temporibus natus magnam perferendis.</p>
<p>Consectetur velit pariatur tempore neque perferendis officiis praesentium error a aliquid, ad delectus quas quidem assumenda id nostrum blanditiis at non soluta aut sed iste accusantium nisi laborum? Consequatur, sint.</p>
<p>Nulla, doloribus, atque. Molestias culpa nostrum eligendi expedita, dolore iure commodi quas velit voluptatem, tempore eveniet eum voluptates veniam deserunt. Pariatur ipsa saepe corrupti aut perspiciatis, rem nulla nihil. Est.</p>
<p>Quidem architecto, totam animi porro quaerat cupiditate ex dolorum cum facere vel. A fugiat cupiditate deserunt reiciendis est odit. Quae laborum, distinctio rerum pariatur autem voluptatem doloribus nostrum dicta libero.</p>
<p>Maxime dignissimos provident, at commodi eius unde accusamus praesentium iste, itaque consequatur, eum ab. Modi assumenda dolor dolorum molestias debitis, provident voluptate. Ex porro mollitia voluptatem hic possimus, quaerat in.</p>

<h2>Parturient Condimentum Commodo Ligula Tristique</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis quas tempore soluta esse ratione sunt, cupiditate quibusdam, libero modi architecto dicta ut, distinctio dolores delectus accusantium laudantium alias. Fugiat, commodi.</p>
<h3>Vehicula Justo Porta Fringilla Cras</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis quas tempore soluta esse ratione sunt, cupiditate quibusdam, libero modi architecto dicta ut, distinctio dolores delectus accusantium laudantium alias. Fugiat, commodi.</p>
<h4>Venenatis Pharetra Cras Risus Malesuada</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis quas tempore soluta esse ratione sunt, cupiditate quibusdam, libero modi architecto dicta ut, distinctio dolores delectus accusantium laudantium alias. Fugiat, commodi.</p>
<h5>Ridiculus Risus Vehicula Ullamcorper Purus</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis quas tempore soluta esse ratione sunt, cupiditate quibusdam, libero modi architecto dicta ut, distinctio dolores delectus accusantium laudantium alias. Fugiat, commodi.</p>