Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.12)
// Compass (v1.0.0.alpha.21)
// ----

// ==========================================================================
// em()
//
// Convert px to em in a readable fashion.
// ==========================================================================

// Examples:
// 1. font-size: em(14); 
// 2. font-size: em(30/14);
@function em($value, $context: map-get($root-font, font-size)) {
	@return ($value / $context * 1em);
}


// ==========================================================================
// Demoing em()
// ==========================================================================

// Initial sass map to set base font settings (so good)
$root-font:(
	font-size: 18px,
);

// example of how to set base font size on body
// It's the only time you have to use the map-get
body {
  font-size: map-get($root-font, font-size);
}

// Example of em usage
div {
  /* padding value = 10/18 */
  padding: em(10px);
  font: 400 #{em(18px)}/1.6 lato;
  
  .child {
    /* font-size value = 9/18 */
    font-size: em(9px);
  }
}

// Gotchas
.desired {
  font: 400 1em/1.6 lato;  
}

.breaks {
  font: 400 em(18px)/1.6 lato;  
}

SassMeister-output.css

body {
  font-size: 18px;
}

div {
  /* padding value = 10/18 */
  padding: 0.55556em;
  font: 400 1em/1.6 lato;
}
div .child {
  /* font-size value = 9/18 */
  font-size: 0.5em;
}

.desired {
  font: 400 1em/1.6 lato;
}

.breaks {
  font: 400 0.625em lato;
}