scss 响应线高度Mixin

Posted 2021-05-17

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了scss 响应线高度Mixin相关的知识，希望对你有一定的参考价值。

/* --------------------------
 * RESPONSIVE LINE HEIGHT SIZE
 * -------------------------- */

@mixin sr-responsive-line-height($responsive, $min, $max: false, $fallback: false) {
  $responsive-unitless: $responsive / ($responsive - $responsive + 1);
  $dimension: if(unit($responsive) == 'vh', 'height', 'width');
  $min-breakpoint: $min / $responsive-unitless * 100;
  
  @media (max-#{$dimension}: #{$min-breakpoint}) {
    line-height: $min;
  }
  
  @if $max {
    $max-breakpoint: $max / $responsive-unitless * 100;
    
    @media (min-#{$dimension}: #{$max-breakpoint}) {
      line-height: $max;
    }
  }
  
  @if $fallback {
    line-height: $fallback;
  }
  
  line-height: $responsive;
}

以上是关于scss 响应线高度Mixin的主要内容，如果未能解决你的问题，请参考以下文章

javascript scss响应#css #scss #responsive #mixin