scss 多流体上浆混合物现在与rem！

Posted 2021-05-17

/// linear-interpolation
/// Calculate the definition of a line between two points
/// @param $map - A SASS map of viewport widths and size value pairs
/// @returns A linear equation as a calc() function
/// @example
///   font-size: linear-interpolation((320px: 18px, 768px: 26px));
/// @author Jake Wilson <[e-mail]>
@function linear-interpolation($map) {
  $keys: map-keys($map);
  @if (length($keys) != 2) {
    @error "linear-interpolation() $map must be exactly 2 values";
  }

  // The slope
  $m: (map-get($map, nth($keys, 2)) - map-get($map, nth($keys, 1)))/(nth($keys, 2) - nth($keys,1));

  // The y-intercept
  $b: map-get($map, nth($keys, 1)) - $m * nth($keys, 1);

  // Determine if the sign should be positive or negative
  $sign: "+";
  @if ($b < 0) {
    $sign: "-";
    $b: abs($b);
  }

  @return calc(#{$m*100}vw #{$sign} #{$b});
}




/// map-sort
/// Sort map by keys
/// @param $map - A SASS map
/// @returns A SASS map sorted by keys
/// @requires function list-sort
/// @author Jake Wilson <[e-mail]>
@function map-sort($map) {
  $keys: list-sort(map-keys($map));
  $sortedMap: ();
  @each $key in $keys {
    $sortedMap: map-merge($sortedMap, ($key: map-get($map, $key)));
  }
  @return $sortedMap;
}



/// list-sort
/// Sort a SASS list
/// @param $list - A SASS list
/// @returns A sorted SASS list
/// @requires function list-remove
/// @author Jake Wilson <[e-mail]>
@function list-sort($list) {
  $sortedlist: ();
  @while length($list) > 0 {
    $value: nth($list,1);
    @each $item in $list {
      @if $item < $value {
        $value: $item;
      }
    }
    $sortedlist: append($sortedlist, $value, 'space');
    $list: list-remove($list, index($list, $value));
  }
  @return $sortedlist;
}



/// list-remove
/// Remove an item from a list
/// @param $list - A SASS list
/// @param $index - The list index to remove
/// @returns A SASS list
/// @author Jake Wilson <[e-mail]>
@function list-remove($list, $index) {
  $newList: ();
  @for $i from 1 through length($list) {
    @if $i != $index {
      $newList: append($newList, nth($list,$i), 'space');
    }
  }
  @return $newList;
}



/// poly-fluid-sizing
/// Generate linear interpolated size values through multiple break points
/// @param $property - A string CSS property name
/// @param $map - A Sass map of viewport unit and size value pairs
/// @requires function linear-interpolation
/// @requires function map-sort
/// @example
///   @include poly-fluid-sizing('font-size', (576px: 22px, 768px: 24px, 992px: 34px));
/// @author Jake Wilson <[e-mail]>
@mixin poly-fluid-sizing($property, $map) {
  // Get the number of provided breakpoints
  $length: length(map-keys($map));

  // Error if the number of breakpoints is < 2
  @if ($length < 2) {
    @error "poly-fluid-sizing() $map requires at least 2 values"
  }

  // Sort the map by viewport width (key)
  $map: map-sort($map);
  $keys: map-keys($map);

  // Minimum size
  #{$property}: map-get($map, nth($keys,1));

  // Interpolated size through breakpoints
  @for $i from 1 through ($length - 1) {
    @media (min-width:nth($keys,$i)) {
      $value1: map-get($map, nth($keys,$i));
      $value2: map-get($map, nth($keys,($i + 1)));
      // If values are not equal, perform linear interpolation
      @if ($value1 != $value2) {
        #{$property}: linear-interpolation((nth($keys,$i): $value1, nth($keys,($i+1)): $value2));
      } @else {
        #{$property}: $value1;
      }
    }
  }

  // Maxmimum size
  @media (min-width:nth($keys,$length)) {
    #{$property}: map-get($map, nth($keys,$length));
  }
}




@mixin rem($property, $values) {
  $px: (); /* 3 */
  $rem: (); /* 3 */

  @each $value in $values {
    /* 4 */

    @if $value == 0 or $value == auto {
      /* 5 */
      $px: append($px, $value);
      $rem: append($rem, $value);
    } @else {
      $unit: unit($value); /* 6 */
      $val: parseInt($value); /* 6 */

      @if $unit == 'px' {
        /* 7 */
        $px: append($px, $value);
        $rem: append($rem,  ($val / 10 + rem));
      }

      @if $unit == 'rem' {
        /* 7 */
        $px: append($px,  ($val * 10 + px));
        $rem: append($rem, $value);
      }
    }
  }

  @if $px == $rem {
    /* 8 */
    #{$property}: $px; /* 9 */
  } @else {
    #{$property}: $px; /* 9 */
    #{$property}: $rem; /* 9 */
  }
}

/// megs-linear-interpolation
/// Calculate the definition of a line between two points
/// @param $map - A SASS map of viewport widths and size value pairs
/// @outputs The property definition using a linear equation as a calc() function
///          If the given property values were in px or rem, it returns the property
///          definition in rem with a px fallback definition
/// @example
///   font-size: linear-interpolation((320px: 18px, 768px: 26px));
/// @author Meg Claypool <[e-mail]>
/// @author Jake Wilson <[e-mail]>
@mixin megs-linear-interpolation($property, $map) {
  $keys: map-keys($map);
  @if (length($keys) != 2) {
    @error "linear-interpolation() $map must be exactly 2 values";
  }

  // The slope
  $m: (parseInt(map-get($map, nth($keys, 2))) - parseInt(map-get($map, nth($keys, 1))))/(parseInt(nth($keys, 2)) - parseInt(nth($keys,1)));

  // The y-intercept
  $b: parseInt(map-get($map, nth($keys, 1))) - $m * parseInt(nth($keys, 1));
  // $b: map-get($map, nth($keys, 1)) - $m * nth($keys, 1);

  // Determine if the sign should be positive or negative
  $sign: "+";
  @if ($b < 0) {
    $sign: "-";
    $b: abs($b);
  }

  $media_unit: unit(nth($keys, 1));
  // @debug "$media_unit = #{$media_unit}";
  $property_unit: unit(map-get($map, nth($keys, 1)));
  // @debug "$property_unit = #{$property_unit}";

  @if ($media_unit == 'px') {
    // @debug "We're in the media unit = px if";
    @if ($property_unit == 'px') {
      $bpx: $b * 1px;
      $brem: $b * .1rem;
      $mpx: $m * 100;
      #{$property}: calc(#{$mpx}vw #{$sign} #{$bpx});
      #{$property}: calc(#{$mpx}vw #{$sign} #{$brem});
      // @debug "we're using px!";
    } @else if ($property_unit == 'rem') {
      $bpx: $b * 10px;
      $brem: $b * 1rem;
      $mrem: $m * 1000;
      #{$property}: calc(#{$mrem}vw #{$sign} #{$bpx});
      #{$property}: calc(#{$mrem}vw #{$sign} #{$brem});
      // @debug "we're using rem";
    } @else {
      // $mpx: $m * 100;
      // #{$property}: calc(#{$mpx} * (100vw / 1px) #{$sign} #{$b}#{$property_unit});
      // @debug "we're using something else!";
      @error "Poly-fluid-rem property values must be in px or rem";
    }
  } @else {
    @error "Poly-fluid-rem media queries must be in px"
  }
}


/// poly-fluid-rem
/// Generate linear interpolated size values through multiple break points
/// @param $property - A string CSS property name
/// @param $map - A Sass map of viewport unit and size value pairs
/// @requires mixin megs-linear-interpolation
/// @requires function map-sort
/// @example
///   @include poly-fluid-rem('font-size', (576px: 22px, 768px: 24px, 992px: 34px));
/// @author Meg Claypool <[e-mail]>
/// @author Jake Wilson <[e-mail]>
@mixin poly-fluid-rem($property, $map) {
  // Get the number of provided breakpoints
  $length: length(map-keys($map));

  // Error if the number of breakpoints is < 2
  @if ($length < 2) {
    @error "poly-fluid-sizing() $map requires at least 2 values"
  }

  // Sort the map by viewport width (key)
  $map: map-sort($map);
  $keys: map-keys($map);

  @for $i from 1 through ($length - 1) {
    @if (unit(nth($keys, $i)) != unit(nth($keys, ($i + 1)))) {
      @error "The media query values must all be in the same units. You are using #{unit(nth($keys, $i))} and #{unit(nth($keys, ($i + 1)))}, which differ,";
    }

    @if (unit(map-get($map, nth($keys, $i))) != unit(map-get($map, nth($keys, ($i + 1))))) {
      @error "The property values must all be in the same units. You are using #{unit(map-get($map, nth($keys, $i)))} and #{unit(map-get($map, nth($keys, ($i + 1))))}, which differ.";
    }
  }


  // Minimum size
  @include rem($property, map-get($map, nth($keys,1)));

  // Interpolated size through breakpoints
  @for $i from 1 through ($length - 1) {
    @media (min-width:nth($keys,$i)) {
      $value1: map-get($map, nth($keys,$i));
      $value2: map-get($map, nth($keys,($i + 1)));
      // If values are not equal, perform linear interpolation
      @if ($value1 != $value2) {
        @include megs-linear-interpolation($property, (nth($keys,$i): $value1, nth($keys,($i+1)): $value2));
      } @else {
        @include rem(#{$property}, $value1);
        // #{$property}: $value1;
      }
    }
  }

  // Maxmimum size
  @media (min-width:nth($keys,$length)) {
    @include rem($property, map-get($map, nth($keys,$length)));
    // #{$property}: map-get($map, nth($keys,$length));
  }
}