_fluid.scss

@import "util/strip-unit";
@import "util/compare-unit";

// =========================================================================
//
//  PRECISE CONTROL OVER RESPONSIVE SIZING FOR SASS
//  ---------------------------------------------------
//  Indrek Paas @indrekpaas
//
//  Inspired by Mike Riethmuller's Precise control over responsive typography
//  http://madebymike.com.au/writing/precise-control-responsive-typography/
//
// =========================================================================

/// @param {list} $properties - list of properties to use
/// @param {string} $min-size - minimum viewport size in pixels or the name of a map key in $breakpoints
/// @param {string} $max-size - maximum viewport size in pixels or the name of a map key in $breakpoints
/// @param {string} $min-value - minimum value in pixels
/// @param {string} $max-value - maximum value in pixels
/// @param {boolean} $negative - whether the value range should be negative
/// @param {string} $scale - value to multiply all values by
/// @param {string} $adjust - pixel amount to adjust all values by
/// @param {string} $size-unit - Unit to use for size (width or height)
/// @param {string} $viewport-unit - Unit to use for viewport units (vw or vh)
/// @param {string} $custom-property-name - If set, a CSS custom property (variable) will be created an :root

@mixin fluid(
  $properties,
  $min-size,
  $max-size,
  $min-value,
  $max-value,
  $negative: false,
  $scale: 1,
  $adjust: 0px,
  $include-min: true,
  $include-max: true,
  $size-unit: 'width',
  $viewport-unit: 'vw',
  $custom-property-name: null
) {

  @if $fluid-min-width and $min-size == 'default' {
    $min-size: $fluid-min-width;
  }
  
  @if $breakpoints and map-has-key($breakpoints, $min-size) {
    $min-size: map-get($breakpoints, $min-size);
  }

  @if $breakpoints and map-has-key($breakpoints, $max-size) {
    $max-size: map-get($breakpoints, $max-size);
  }

  @if $negative {
    $min-value: $min-value * -1;
    $max-value: $max-value * -1;
  }

  $min-value: ($min-value * $scale) + $adjust;
  $max-value: ($max-value * $scale) + $adjust;

  // Ensure that all values are consistent
  @if compare-unit($min-size $max-size $min-value $max-value) != true {
    @warn "All number values passed to `fluid` mixin should have the same unit";
  }

  @if $include-min {
    @if $custom-property-name {
      :root { --#{$custom-property-name}: #{$min-value}; }
    }
    @else {
      @each $property in $properties {
        #{$property}: $min-value;
      }
    }
  }

  @media (min-#{$size-unit}: $min-size) {
    $val: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (#{"100" + $viewport-unit} - #{$min-size}) / #{strip-unit($max-size - $min-size)});

    @if $custom-property-name {
      :root { --#{$custom-property-name}: #{$val}; }
    }
    @else {
      @each $property in $properties {
        #{$property}: $val;
      }
    }
  }

  @if $include-max {
    @media (min-#{$size-unit}: $max-size) {
      @if $custom-property-name {
        :root { --#{$custom-property-name}: #{$max-value}; }
      }
      @else {
        @each $property in $properties {
          #{$property}: $max-value;
        }
      }
    }
  }
}