title: SCSS append to root selector from child
body: <p>I know in SCSS I can do this:</p>
  
  <pre><code>.foo {
      color: blue;
      a {
          color: red;
          .bar &amp; { color: green; }
      }
  }
  </code></pre>
  
  <p>And get this:</p>
  
  <pre><code>.foo { color: blue; }
  .foo a { color: red; }
  .bar .foo a { color: green; }
  </code></pre>
  
  <p>But is there a way to append that selector, to result in:</p>
  
  <pre><code>.foo { color: blue; }
  .foo a { color: red; }
  .foo.bar a { color: green; }
  </code></pre>
  
  <p><em><strong>Note</strong> this is a simple example, in my use case the rule is nested much deeper than this.</em></p>