scss 响应字体大小

Posted 2021-05-18

/*-------------------------------------------
  Font Sizing
-------------------------------------------*/
$base-font-size: 16 !default;

$mq-breakpoints: (
    mobile:  320px,
    mobile-lg: 500px,
    tablet:  740px,
    desktop: 980px,
    wide:    1300px
) !default;

@mixin typo($fs-map, $fs-breakpoints: $mq-breakpoints) {
  @each $fs-breakpoint, $fs-font-size in $fs-map {
    @if $fs-breakpoint == null {
      @include typo-single($fs-font-size);
    }
    @else {
      // If $fs-font-size is a key that exists in
      // $fs-breakpoints, use the value
      @if map-has-key($fs-breakpoints, $fs-breakpoint) {
        $fs-breakpoint: map-get($fs-breakpoints, $fs-breakpoint);
      }
      @media screen and (min-width: $fs-breakpoint) {
        @include typo-single($fs-font-size);
      }
    }
  }
}

// Utility function for typo mixin
@mixin typo-single($fs-font-size) {
	/*---------------------------------------------
	  If $fs-font-size is a list, include:
	  	1. font-size (in pixels)
			2. line-height
			3. letter-spacing
			4. font-weight
	---------------------------------------------*/
  @if type-of($fs-font-size) == "list" {
		$rem: nth($fs-font-size, 1)/$base-font-size;
    font-size: #{nth($fs-font-size, 1)}px;
		font-size: #{$rem}rem;
    @if (length($fs-font-size) > 1) {
      line-height: nth($fs-font-size, 2);
    }
		@if (length($fs-font-size) > 2) {
      letter-spacing: nth($fs-font-size, 3);
    }
		@if (length($fs-font-size) > 3) {
      font-weight: nth($fs-font-size, 4);
    }
  }
  @else {
		$rem: $fs-font-size/$base-font-size;
		font-size: #{$fs-font-size}px;
		font-size: #{$rem}rem;
  }
}


/* 

EXAMPLE USEAGE 

$fs-headline-xxl: (
  null: (24, 1.5, inherit, 300),
  tablet: (36, 1.67, inherit, 300),
  desktop: (72, 83.33px, inherit, 300),
);

h1 { 
  @include typo($fs-headline-xxl); 
}

*/