Generated by SassMeister.com.

SassMeister-input-HTML.html

<h1>Test</h1>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

// list-separator polyfill by Hugo Giraudel (https://sass-compatibility.github.io/#list_separator_function)
@function em-separator($list) {
  @if function-exists("list-separator") == true {
    @return list-separator($list);
  }

  $test-list: ();
  @each $item in $list {
    $test-list: append($test-list, $item, space);
  }

  @return if($test-list == $list, space, comma);
}

@function em($values...) {  
  $context: nth($values, length($values));
  $result: ();
  $separator: em-separator($values);

  @for $i from 1 through length($values) - 1 {
    $value: nth($values, $i);
    @if type-of($value) == "number" and unit($value) == "px" {
      $result: append($result, $value / $context * 1em, $separator);
    } @else if type-of($value) == "list" {
      $result: append($result, em(append($value, $context)...), $separator);
    } @else {
      $result: append($result, $value, $separator);
    }
  }

  @return if(length($result) == 1, nth($result, 1), $result);
}

@mixin em($properties, $context) {
  @each $property in map-keys($properties) {
    #{$property}: em(append(map-get($properties, $property), $context)...);
  }
}

$base-font-size: 16px;
$h1-font-size: 24px;

h1 {
  font-size: em($h1-font-size, $base-font-size); // Simple
  border-bottom: em(1px solid black, $h1-font-size); // Shorthand
  box-shadow: em(0 0 2px #ccc, inset 0 0 5px #eee, $h1-font-size); // Multiple values
  // Mixin (Sass 3.3+)
  @include em((
    margin: 20px 5%,
    padding: 10px
  ), $h1-font-size);
}

SassMeister-output.css

h1 {
  font-size: 1.5em;
  border-bottom: 0.04167em solid black;
  box-shadow: 0 0 0.08333em #ccc, inset 0 0 0.20833em #eee;
  margin: 0.83333em 5%;
  padding: 0.41667em;
}

SassMeister-rendered.html

<h1>Test</h1>