title: Append the parent selector to the end with Sass
body: <p>Ok, suppose I have the following traditional CSS</p>
  
  <pre><code>.social-media { /* ... */ }
  .social-media .twitter { /* ... */ }
  .social-media .facebook { /* ... */ }
  ul.social-media { /* ... */ }
  </code></pre>
  
  <p>So, I tried to do it like this with SCSS:</p>
  
  <pre><code>.social-media {
  
      /* ... */
  
      .twitter { 
          /* ... */
      }
      .facebook {
          /* ... */
      }
  
      // Here's the problem:
      ul&amp; {
          /* ... */
      }
  }
  </code></pre>
  
  <p>The last part does not work, because it seems like the ampersand should only appear at the beginning of a selector. Is there a workaround?</p>