_convert-px-to-em-rem.scss

/* ============================================================================
   @CORE -> MIXINS -> CONVERT PX TO EM/REM
   ========================================================================= */


/**
 * Convert `px` to `em`s or `rem`s for multiple properties or values or
 * both. Accepts a list of lists (instead a list of values) for properties
 * that accept multiple lists of values. Only numbers are converted;
 * everything else is passed through. For the `to-em` `@mixin` `$context` is
 * an optional argument that allows making measurements relative to the parent
 * font size rather than the current.
 *
 * N.B. a `px` unit is not necessary but will work if specified e.g. "20" is
 * fine, so is "20px" e.g.
 *
   .foo {
     @include to-em(height, 125);
   }

   .foo {
     @include to-em(height, 125px);
   }
 *
 * @example
   .foo {
     @include to-em(width height, 125);
   }

   .foo {
     @include to-rem(padding, 0 25);
   }

   .foo {
     @include to-em(text-shadow, (#0d6e28 1 1) (#777 0 0 2), 16);
   }

   .foo {
     @include to-rem(box-shadow, (inset 0 0 0 1 #2a9022) (inset 0 0 3 #459966));
   }

   .foo {
     @include to-em(padding margin, $spacing-base, false, true);
   }

   .foo {
     @include to-rem(padding margin, $spacing-base, true);
   }
 */


/**
 * A generic mixin that is used by the `to-em()` and `to-rem()` mixins below.
 */

@mixin to-em-or-rem($unit, $properties, $sizes, $context, $sledgehammer) {

  $values: ();
  $sublists: false;
  $unit: if($unit == "em", 1em, 1rem);
  $important: if($sledgehammer, " !important", "");

  @each $s in $sizes {

    @if type-of($s) == list {
      $sublists: true;
      $vv: ();

      @each $ss in $s {
        $vv: append($vv, if(type-of($ss) == number and $ss != 0, strip-unit($ss) / strip-unit($context) * $unit, strip-unit($ss)));
      }

      $values: append($values, join((), $vv));
    }
    @else {
      $values: append($values, if(type-of($s) == number and $s != 0, strip-unit($s) / strip-unit($context) * $unit,
        strip-unit($s)));
    }
  }

  $value: join((), $values, if($sublists, comma, space));

  @each $prop in $properties {
    #{$prop}: $value#{$important};
  }
}


/**
 * `em`.
 */

@mixin to-em($properties, $sizes, $context: false, $sledgehammer: false) {
  $context: if($context == false or $context == "", $font-size, $context);
  @include to-em-or-rem("em", $properties, $sizes, $context, $sledgehammer);
}


/**
 * `rem`.
 */

@mixin to-rem($properties, $sizes, $sledgehammer: false) {
  @include to-em-or-rem("rem", $properties, $sizes, $font-size, $sledgehammer);
}