title: Increase specificity weight with double selector via Sass
body: <p>As mentioned here on Stack Overflow <a href="https://stackoverflow.com/questions/11572081/css-class-repetition-to-increase-specificity">in another question</a> and MDN <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity" rel="nofollow noreferrer">tells about the specificity</a> of selectors, I want to slightly increase the weight of my selector via Sass to override some existing styles. Here's an example of the (compiled) CSS.</p>
  <pre class="lang-css prettyprint-override"><code>.parent .parent__child.parent__child { color: red; }
  </code></pre>
  <p>It is more specific than just using <code>.parent .parent__child</code> as a selector.</p>
  <hr>
  <p>I have a way to do this via Sass, but I think there should be a better way to do this:</p>
  <pre class="lang-css prettyprint-override"><code>.parent {
      &amp;__child.parent__child { color: red; }
  }
  </code></pre>
  <p>Ideally, this would be the best possible setup (the ampersands have to be directly attached to each other since it's not a child selector):</p>
  <pre class="lang-css prettyprint-override"><code>.parent {
      &amp;__child&amp;__child { color: red; }
  }
  </code></pre>
  <p>This throws an error and adds a dot between the 'child' selectors. The <a href="http://sass-lang.com/documentation/file.SASS_REFERENCE.html#Referencing_Parent_Selectors_____parent-selector" rel="nofollow noreferrer">Sass documentation</a> doesn't say anything about this particular case. Any ideas on how to achieve this?</p>
  <p><strong>edit</strong></p>
  <p>I know about the interpolation brackets method, but what if the selector is more profound than three or four layers deep? I only want its parent selector to be duplicated, not the <em>whole</em> selector tree.</p>