title: SASS function to convert px to em
body: <p>I'm trying to implement a SASS function that will convert pixels to ems for our application and running into trouble.  </p>
  
  <p>Here's the function:</p>
  
  <pre><code>$browser-context: 16;
  
  @function em($pixels, $context: $browser-context) {
    @if (unitless($pixels)) {
     $pixels: $pixels * 1px;
    }
  
    @if (unitless($context)) {
      $context: $context * 1px;
    }
  
    @return $pixels / $context * 1em;
  }
  </code></pre>
  
  <p>and I'm implementing the function here:</p>
  
  <pre><code>.k-grid-header {
    font-size: 16px;
  }
  
  .k-grid-header .k-header:not(.k-widget) {
    font-size: em(16);
  }
  </code></pre>
  
  <p>My issue is that it only works if I have the .k-grid-header class and I don't really understand why.  I would think the second class that calls the function would be enough to set the size.  </p>