title: How do I stop Sass adding spaces before units of measurement?
body: <p>I'm attempting to follow <a href="http://www.netmagazine.com/tutorials/build-responsive-site-week-typography-and-grids-part-2">this tutorial</a> on responsive layout design, but using SASS/SCSS as my base specification language.</p>
  
  <p>To that end, I have defined the following SCSS:</p>
  
  <pre><code>body {
    font: 100%/1.5;
  }
  
  h1 {
    $h1_size: 24;
    font-size: ($h1_size / 16)em;
    line-height:(28 / $h1_size)em;
    margin-top: (24 / $h1_size)em;
  }
  </code></pre>
  
  <p>Unfortunately, the output from <code>sass</code> into CSS format looks like this:</p>
  
  <pre><code>h1 {
    font-size: 1.5 em;
    line-height: 1.167 em;
    margin-top: 1 em;
  }
  </code></pre>
  
  <p>— with the unit separated from the value by a space. Chrome rejects these values as invalid, and only uses them if I manually go and remove the spaces myself.</p>
  
  <p><strong>Is there a way to fix this problem by tweaking my SCSS, or by passing an option to <code>sass</code>?</strong></p>
  
  <p>So far, I have tried:</p>
  
  <ul>
  <li>placing the unit inside the calculation:<br/>
  <ul>
  <li>(<code>font-size: ($h1_size / 16em)</code> ) => <em>syntax error</em></li>
  <li>(<code>font-size: (($h1_size)em / 16)</code> => <em><code>font-size: 24 em/16;</code></em> which is the same problem I'm trying to fix</li>
  </ul></li>
  </ul>