title: Sass maps - Responsive Typography
body: <p>I'm trying to write a Sass map to make my headers responsive.</p>
  
  <p>I often use <a href="http://type-scale.com/" rel="nofollow noreferrer">http://type-scale.com/</a> to set my header font sizes so for e.g. using that my h1 would be 3.998rem.</p>
  
  <p>The problem with that is at mobile sizes it's too big.</p>
  
  <p>You could write media queries for h1 to h6 but that would be too much code.</p>
  
  <p>I've written an example which works for just h1 tags but how could I make it work h1 through to h6 without writing multiple maps?</p>
  
  <p>Cheers</p>
  
  <p><strong>SASS</strong></p>
  
  <pre><code>$headers-responsive: (
      null: 1rem,
      480px: 1.5rem,
      768px: 2rem,
      992px: 3rem,
      1200px: 4rem
  );
  
  @mixin font-scale($font-scaler) {
      @each $breakpoint, $value in $font-scaler {
          @if($breakpoint == null) {
              font-size: $value;
          } @else {
              @media (min-width: $breakpoint) {
                  font-size: $value;
              }
          }
      }
  }
  
  h1 {
      @include font-scale($headers-responsive);
  }
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>h1 {
  font-size:1rem;
  }
  
  @media (min-width:480px) {
  h1 {
    font-size:1.5rem;
  }
  }
  
  @media (min-width:768px){
  h1 {
    font-size:2rem;
  }
  }
  
  @media (min-width:992px){
  h1 {
    font-size:3rem;
  }
  }
  
  @media (min-width:1200px){
  h1 {
    font-size:4rem;
  }
  }
  </code></pre>