Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

// ==========================================================================
// Typography variables
// ==========================================================================

$root-font-size: 20px;

// ==========================================================================
// Typography functions
// ==========================================================================

// em() function
// Convert px to em in a readable fashion.
// Examples:
// 1. font-size: em(14px);
// 2. font-size: em(30px/14px);

@function em( $value, $context: $root-font-size ) {
  @if variable-exists( em ) {
    @return ( $value / $em * 1em );
  } @else {
   @return ( $value / $context * 1em );
  }
}

// ==========================================================================
// Typography
// ==========================================================================

.without-variable {
  font-size: em( 15px );
  line-height: em( 30px, 15px );
}

.with-variable {
 $em: 15px !global;
 font-size: em( $em );
 line-height: em( 30px );
}

SassMeister-output.css

.without-variable {
  font-size: 0.75em;
  line-height: 2em;
}

.with-variable {
  font-size: 1em;
  line-height: 2em;
}