scss 来自https://medium.com/@gommaar/responsive-typography-with-sass-maps-3b0838292662

Posted 2021-05-18

@mixin landing($base-size){

    font-size:$base-size/2.222;
    h1 {margin:0 auto $base-size auto; height:$base-size*5;}
    h2, h3 {margin:0 0 ($base-size - ($base-size/3));}
    h2 {font-size:$base-size - ($base-size/5);}
    h3 {font-size:$base-size - ($base-size/3);}
    p {margin-bottom:$base-size/2;
      &:last-child {margin-bottom:0}
    }
    .brand {margin:0 auto ($base-size/2) auto; height:$base-size;}
    .btn-primary {border-width:$base-size/8;}
    .jumbotron {padding:$base-size; height:$base-size*15;}
    .well {padding: $base-size - ($base-size/3);
      h2 {margin-bottom:$base-size; font-size:$base-size; }
      p {font-size:($base-size/2);}
      .btn-lg {font-size:($base-size/2)}
      input[type="email"] {margin:0 0 ($base-size/2); border-width:($base-size/8)}
    }
    header {padding:$base-size;
      h2 {margin:($base-size/4) 0 0}
    }
    main > div {
      > div:first-child {padding-top:$base-size; padding-right:$base-size; padding-bottom:$base-size; padding-left:$base-size;}
      > div:last-child {
          div:first-child {height:$base-size*8;}
          div:last-child{padding-top:$base-size; padding-bottom:$base-size;}
          h3 {margin-left:$base-size*1.333;}
          ul {margin:0 0 0 ($base-size/6); padding:0 0 0 ($base-size*1.333); font-size:$base-size/2;}
          li {margin:0 0 ($base-size/3);
            &:last-child {margin:0}
          }  
      }
    }
    footer {padding:$base-size; font-size:$base-size/2.75;
      address {margin-bottom:($base-size/3)}
      ul {margin:0 0 ($base-size/3)}
      small {margin-top:$base-size/3;
      }
    }
}

@include landing($base-size: 32px);

@media (min-width: 992px){
  @include landing($base-size: 38px);
}

@media (min-width: 1200px){
  @include landing($base-size: 44px);
}

@media (min-width: 1600px){
  @include landing($base-size: 54px);
}