_size.scss

@import "fluid";

//===============================================================
// Size
//===============================================================
/*
  Mixin to provide sizing (often either margin or padding, but can be any numeric property) to a defined
  location of an element and have that spacing scale fluidly between screen sizes.
  Relies on a $sizes map variable existing in the following format:
*/

$sizes: (
  s: (
    default: 20px,
    medium: 40px,
    max: 80px
  ),

  m: (
    default: 20px,
    medium: 40px,
    max: 80px
  )
) !default;

$breakpoints: () !default;

$fluid-min-width: 320px !default;


//---------------------------------------------------------------
// Get Size
//---------------------------------------------------------------
/*
  Function for getting a specific size/breakpoint value from the $sizes map.
  @param $size (string)           - Key size you want
  @param $breakpoint (string)     - The breakpoint you want sizing at
*/
@function get-size($size, $breakpoint: null) {
  @if map-has-key($sizes, $size) {
    $size-set: map-get($sizes, $size);
    @if map-has-key($size-set, $breakpoint) {
      @return map-get($size-set, $breakpoint);
    } @else {
      $breakpoints-length: length(map-values($size-set));
      $last-breakpoint-value: nth(map-values($size-set), $breakpoints-length);
      @return $last-breakpoint-value;
    }
  }
}


//---------------------------------------------------------------
// Get Size Set
//---------------------------------------------------------------
/*
  Function for getting a specific size set from the $sizes map.
  @param $size (string)  - Size set you want
*/
@function get-spacing-size($size, $map: $sizes) {
  @if map-has-key($map, $size) {
    @return map-get($map, $size);
  }
  @else {
    @error "Key `#{$size}` doesn't exist in map `#{$map}`";
  }
}


//---------------------------------------------------------------
// Output Size Markup
//---------------------------------------------------------------
/*
  Generates responsive size and applies it to the supplied property.
  @param $size (key)                   - Key size you want (from the $sizes map)
  @param $property (string)            - The css property you'd like to apply the size to
                                         will only be applied up until this breakpoint.
  @param $negative (boolean)           - If true, returns a negative range
  @param $adjust (pixel value)         - Adjusts all resulting values by a given amount
  @param $scale (number)               - Multiplies all resulting values by a given amount
*/
@mixin size($size, $property: margin-top, $negative: false, $adjust: null, $scale: 1) {
  @if map-has-key($sizes, $size) {
    @each $prop in $property {
      // If we're customizing the original value we need a more complicated calc…
      $val: var(--size-#{$size});
      @if $negative or $adjust != null or $scale != 1 {
        $mult: 1;
        @if $negative { $mult: -1; }
        $base: "#{$val} * #{$scale}";
        @if $adjust != null {
          $base: "(#{$base} + #{$adjust})";
        }
        #{$prop}: calc(#{$base} * #{$mult});
      }
      // …otherwise we can keep things simple
      @else {
        #{$prop}: #{$val};
      }
    }
  }
  @else {
    @error "Key `#{$size}` doesn't exist in map `$sizes`";
  }
}


//---------------------------------------------------------------
// Output Fluid Breakpoints
//---------------------------------------------------------------
/*
  Loops through breakpoints and outputs responsive sizes
  @param $size-set (map)                   - Size set you want (from the $sizes map)
  @param $properties (list)                - The css property you'd like to apply the size to
                                             will only be applied up until this breakpoint.
  @param $negative (boolean)               - If true, returns a negative range
  @param $adjust (pixel value)             - Adjusts all resulting values by a given amount
  @param $scale (number)                   - Multiplies all resulting values by a given amount
  @param $custom-property-name (string)    - If set, a CSS custom property (variable) will be created an :root
*/
@mixin output-sizes(
  $size-set,
  $properties,
  $negative: false,
  $adjust: 0,
  $scale: 1,
  $custom-property-name: null
) {
  // Create an index we can increment
  $idx: 1;

  $size-set-length: length(map-keys($size-set));

  // Set initial breakpoint
  $previous-breakpoint: $fluid-min-width;
  $previous-size: map-get($size-set, default);

  @if $size-set-length == 1 {
    @if $custom-property-name {
      :root { --#{$custom-property-name}: #{$previous-size}; }
    }
    @else {
      $value: $previous-size * $scale + $adjust;
      @if $negative { $value: $value * -1; }
      @each $property in $properties {
        #{$property}: $value;
      }
    }
  }
  @else {
    @each $key, $value in $size-set {
      @if map-has-key($breakpoints, $key) {
        $new-breakpoint: map-get($breakpoints, $key);
        $include-min: $idx == 1;
        $include-max: $idx == $size-set-length - 1;
        @include fluid(
          $properties,
          $previous-breakpoint,
          $new-breakpoint,
          $previous-size,
          $value,
          $negative,
          $scale,
          $adjust,
          $include-min: $include-min,
          $include-max: $include-max,
          $custom-property-name: $custom-property-name
        );
        $previous-breakpoint: $new-breakpoint;
        $previous-size: $value;
        $idx: $idx + 1;
      }
    }
  }
}


//---------------------------------------------------------------
// Output Helper Classes
//---------------------------------------------------------------
/*
  Loop through the $sizes map (defined in `_base/variables.scss`)
  and generate helpers classes we can use to apply directly into our
  template markup.
*/

@mixin output-size-helpers {
  @each $size-key in map-keys($sizes) {
    .h-size-top-margin-#{$size-key} {
      @include size($size-key);
    }

    .h-size-bottom-margin-#{$size-key} {
      @include size($size-key, margin-bottom);
    }

    .h-size-top-padding-#{$size-key} {
      @include size($size-key, padding-top);
    }

    .h-size-bottom-padding-#{$size-key} {
      @include size($size-key, padding-bottom);
    }
  }
}


//---------------------------------------------------------------
// Output Size Custom Properties
//---------------------------------------------------------------
/*
  Loop through the $sizes map (defined in `_base/variables.scss`)
  and generate a responsive CSS custom property (variable) for each.
*/

@mixin output-size-custom-properties {
  @each $key, $val in $sizes {
    @include output-sizes($val, margin, $custom-property-name: 'size-#{$key}');
  }
}