title: SASS nesting class selectors in an element selector doesn't work
body: <p>I'm trying to nest the various classes for the div elements in SASS. However, the resulting CSS does not work correctly. I've read through the documentation and nothing specifically mentions doing this so I'm not sure if I'm doing something wrong.</p>
  
  <p>This SASS code:</p>
  
  <pre><code>div {
      //various page elements
      .page_header {
          clear: both;
          float: left;
          color: $text-color-light;
          background-color: #2C3E50;
      }
  
      .page_header_title {
          clear: left;
          float: left;
      }
  }
  </code></pre>
  
  <p>Results in the following CSS:</p>
  
  <pre><code>div .page_header {
    clear: both;
    float: left;
    color: #ECF0F1;
    background-color: #2C3E50; }
  div .page_header_title {
    clear: left;
    float: left; }
  </code></pre>
  
  <p>When I first saw the resulting CSS I didn't see any reason why it wouldn't work. But I must be missing some knowledge about how CSS selectors work when they are separated like that because it has no effect on the page at all in Chrome. When I change it so the selectors are defined as <code>div.page_header</code> and <code>div.page_header_title</code> the CSS works properly, but I lose out on the nifty nesting functionality in SCSS.</p>
  
  <p>Specifically I am developing an ASP.NET MVC5 website in Visual Studio 2013 Update 3 with Web Essentials 2013 for Update 3.</p>
  
  <p>Am I doing something wrong or is this just not going to work?</p>