Sass maps - レスポンシブなタイポグラフィ

Question

私はヘッダーを反応させるためにSassマップを作成しようとしています。

多くの場合、http://type-scale.com/を使用して、ヘッダーのフォントサイズを設定します。それを使って私のh1は3.998remになります。

問題はモバイルサイズでは大きすぎます。

h1〜h6のメディアクエリを書くことができますが、コードが多すぎます。

私はh1タグだけで動作するサンプルを作成しましたが、複数のマップを書き込むことなくh1からh6までどのように動作させることができますか？ font-scale()に "乗数" パラメータを追加する方法について

乾杯

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

どのように？

はh1の60％であることをあなたはh2がh1の80％になりたいと言うと、h3：

... 

@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); 
}