title: Append unit type to the result of a calculation in Sass
body: <p>I've been refactoring my CSS to a SASS style sheet recently. I'm using the <a href="http://visualstudiogallery.msdn.microsoft.com/2b96d16a-c986-4501-8f97-8008f9db141a" rel="noreferrer">Mindscape Web Workbench extension</a> for VS2012, which re-generates the CSS each time you save your SCSS. I started with code similar to this:</p>
  
  
  
  <pre><code>/* Starting point: */
  h1 { font-size: 1.5em; /* 24px ÷ 16px */ }
  </code></pre>
  
  <p>Then I tried to refactor it first to this:</p>
  
  <pre><code>/* Recfator: */
  h1 { font-size: (24px / 16px)em; }
  </code></pre>
  
  <p>But this unfortunately produces:</p>
  
  <pre><code>/* Result: */
  h1 { font-size: 1.5 em; }              /* doesn't work, gives "1.5 em" */
  </code></pre>
  
  <p>Notice the <strong>extra space</strong>, which I don't want there. I've tried several alternatives, here are a few:</p>
  
  <pre><code>h1 { font-size: (24/16)em; }           /* doesn't work, gives "1.5 em" */
  h2 { font-size: 24 / 16em; }           /* doesn't work, gives "24/16em" */
  h3 { font-size: (24px / 16px) * 1em; } /* works but "* 1 em" feels unnecessary */
  h4 { font-size: (24em) / 16; }         /* works, but without "px" it's not 
                                            really conveying what I mean to say */
  </code></pre>
  
  <p>I've also tried these variants with variables (because I want those anyways), but that didn't change the situation much. To keep the examples in this question sleek I've left out variables. However, I'd happily accept a solution that relies on using variables (in a clean way).</p>
  
  <p>I've gone through the <a href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#division-and-slash" rel="noreferrer">relevant SASS documenation on '/'</a>, and appreciate that this is a tough one for SASS because the '/' character already has a meaning in basic CSS. Either way, I was hoping for a clean solution. Am I missing something here?</p>
  
  <p>PS. <a href="http://erskinelabs.com/calculating-ems-scss/" rel="noreferrer">This blogpost</a> does offer one solution, using a user defined function. That seems a bit heavy-weight though, so I'm interested if there's "cleaner" solutions in line with my attempts above. If someone can explain the "function approach" is the better (or even only) solution then I'll accept that as an answer too.</p>
  
  <p>PS. <a href="https://stackoverflow.com/q/15513395/419956">This related question</a> seems to be about the same thing, though that one specically wants to do further calculations. <a href="https://stackoverflow.com/a/15514279/419956">The accepted answer there</a> is my third workaround (multiplying by <code>1em</code>), but I'd love to know if there's a different (cleaner) way if I'm willing to forego the ability to do further calculations. Perhaps the method mentioned in said question ("interpolation") is useful for me?</p>
  
  <hr>
  
  <p><strong><em>Bottom line:</strong> how can you cleanly append the unit type (e.g. <code>em</code>) to the result of a calculation in SASS?</em></p>