using SASS to convert/calculate css sizes from px to em, px to percent and em to px; also has function to remove units / (Design in pixels then convert it to em or percent)

calc-elem.scss

//----- Global variables-------------
$mr-grid-width: 1200px !default;    // The wrapper/container size$mr-gutter-width: 20px !default; // The amount of margin between columns
$mr-em-base: 16px !default;
$mr-convert-to: "%" !default;
//----------------------------------

@function -mr-grid-col-width($cols, $grid-width:$mr-grid-width, $grid-total-cols:$mr-grid-total-column, $gutter-width: $mr-gutter-width){
  //$cols   The number of columns used to create the current elements width.

  @return ($grid-width / $grid-total-cols) * $cols - $gutter-width;
}
 @function mr-remove-unit($target){
   $one:1;
     @if not unitless($target){
      //find out the unit of measurement being used
      @if (unit($target) == "px"){$one:1px;}
      @elseif (unit($target) == "em"){$one:1em;}
      @elseif (unit($target) == "%"){$one:1%;}
      // dividing by the same unit forces sass to return a value with no unit
     @return $target / $one ;
     }
   @else
   {@return $target;}
  }


@function -mr-calc-elem($target-size,$new-unit:$mr-convert-to,$em-base:$mr-em-base,$context:$mr-grid-width){
 // $context defaults to the container's size
 // $new-unit accepts as values %, em, or px

 //if no unit is entered, assume the unit being used is in pixels
   @if unitless($target-size){
    @warn "Assuming #{$target-size} to be in pixels, change to #{$target-size}px or another unit of measurement";
    $target-size: $target-size * 1px;
 }

 // remove units to prevent sass errors
 $context:mr-remove-unit($context);
 $em-base:mr-remove-unit($em-base);
 $nounit-target-size: mr-remove-unit($target-size);

  @if (unit($target-size) == $new-unit){
      //does not make sense to convert to the same unit, so return the original size
    @return $target-size;
   }
   //convert pixel to percentage
   @elseif (unit($target-size) == "px" and $new-unit =="%"){
    @return  percentage($nounit-target-size / $context);
   }
  
    //---convert pixel to em
   @elseif (unit($target-size) == "px" and $new-unit =="em"){
     // multiplying by 1em forces sass to add the em unit to the result
    @return ($nounit-target-size / $em-base)* 1em;
   }
   //---convert em to px
   @elseif (unit($target-size) == "em" and $new-unit =="px"){
  
    // multiplying by 1px forces sass to add the px unit to the result,
    @return ($nounit-target-size * $em-base) * 1px;
   }
   @else {
      @warn "The unit being used is #{unit($target-size)}, #{$target-size} should be in px, %, or em"  ;
      @return $target-size;
    }
}