remConversions.scss

// can use sassfp instead, but adding these here so they can work in sassmeister


@function applyUnit($unit, $val) {
  @return unquote('#{$val}#{$unit}');
}

// shortcut function to apply px unit
@function px($val) {
  @return applyUnit('px', $val);
}

@function explode($str, $separator) {
  $result: ();
  $index: str-index($str, $separator);
  @while $index != null {
    $item: str-slice($str, 1, $index - 1);
    $result: append($result, $item);
    $str: str-slice($str, $index + 1);
    $index: str-index($str, $separator);
  }
  $result: append($result, $str);
  @return $result;
}

@function prop($path, $map) {
  $keys: explode($path, '.');
  @each $key in $keys {
    $map: map-get($map, $key);
  }
  @return $map;
}
// end sassfp functions

$h1-font-size: 3.2em;

@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }
  @return $number;
}

@function rem-to-px($input) {
  @return px(strip-unit($input) * 10);
}

$vars: (
  h1-font-size:(
    web: $h1-font-size,
    native: rem-to-px($h1-font-size)
  )
);

$context: 'native';

.title {
  font-size: prop('h1-font-size.#{$context}', $vars);
}