Sass 地图 - 响应式排版答案

【问题标题】：Sass maps - Responsive TypographySass 地图 - 响应式排版
【发布时间】：2017-04-11 14:57:12
【问题描述】：

我正在尝试编写一个 Sass 映射以使我的标题响应。

我经常使用http://type-scale.com/ 来设置我的标题字体大小，例如使用我的 h1 将是 3.998rem。

问题在于移动设备尺寸太大。

您可以为 h1 到 h6 编写媒体查询，但这将是太多代码。

我已经编写了一个仅适用于 h1 标签的示例，但是如何在不编写多个映射的情况下使其适用于 h1 到 h6？

干杯

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

【问题讨论】：

标签： css responsive-design sass

【解决方案1】：

给font-scale()添加一个“乘数”参数怎么样？

假设您希望 h2 是 h1 的 80%，而 h3 是 h1 的 60%：

...

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

【讨论】：