Sass maps - Responsive Typography - css

Question

I'm trying to write a Sass map to make my headers responsive.
I often use http://type-scale.com/ to set my header font sizes so for e.g. using that my h1 would be 3.998rem.
The problem with that is at mobile sizes it's too big.
You could write media queries for h1 to h6 but that would be too much code.
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?
Cheers
SASS
$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);
}
CSS
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;
}
}

Answer 1

How about adding a "multiplier" parameter to font-scale()?
Say you want h2 to be 80% of h1, and h3 to be 60% of h1:
...
#mixin font-scale($font-scaler, $multiplier: 1) {
#each $breakpoint, $value in $font-scaler {
#if($breakpoint == null) {
font-size: $value * $multiplier;
} #else {
#media (min-width: $breakpoint) {
font-size: $value * $multiplier;
}
}
}
}
h1 {
#include font-scale($headers-responsive);
}
h2 {
#include font-scale($headers-responsive, .8);
}
h3 {
#include font-scale($headers-responsive, .6);
}