title: Sass "semantically" nesting tags and classes
body: <p>I am trying to enforce some kind of <strong>semantic</strong> css class nesting in Sass. I want to enforce that css code for sections can only be used in sections, to make sure that the <code>&lt;section /&gt;</code> tag is used where it should semantically. </p>
  
  <p>But I am running in troubles with the use of <code>&amp;</code> in my Sass files. Consider the following html:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;section class="section-home"&gt;
    &lt;h1 class="section-home__heading"&gt;Section heading&lt;/h1&gt;
    &lt;p class="section-home__intro"&gt;This is some random text&lt;/p&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>I would assume I could use the following code in Sass, but no:</p>
  
  <pre class="lang-sass prettyprint-override"><code>section {
    &amp;.section-home {
      background-color: white;
      &amp;__heading {
        font-size: 5rem;
      }
      &amp;__intro {
        color: grey;
      } 
    }  
  }
  </code></pre>
  
  <p>Sass renders it into the following CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>section.section-home{background-color:#fff}
  section.section-home__heading{font-size:5rem}
  section.section-home__intro{color:grey}
  </code></pre>
  
  <p>And that is not what I expect or need, I want: </p>
  
  <pre class="lang-css prettyprint-override"><code>section.section-home{background-color:#fff} 
  section.section-home .section-home__heading{font-size:5rem} 
  section.section-home .section-home__intro{color:grey}
  </code></pre>
  
  <p>Is this a bug? Am I doing something wrong here?</p>