title: Sass ampersand when base uses pseudo-element (before / after)
body: <p>I have multiples <code>div::before</code> that share 90% of the styling and I want to style them using the nested structure of SASS to only specify the differences after while keeping them grouped. But I can't found how to do it when the base that will become the <code>&amp;</code> is already using a pseudo-element. When doing this :</p>
  
  <p><strong>SASS</strong></p>
  
  <pre><code>#home .foo .bar::before {
      content: "";
      position: absolute;
      margin: 2px;
      background: url("images/baz.png") 0 0 no-repeat;
      height: 39px;
      width: 56px;
  
      &amp;.item-1 {
          top: 0;
          right: 0;
      }        
      &amp;.item-2 {
          top: 10px;
          right: 20px;
      }
      &amp;.item-3 {
          top: 40px;
          right: 60px;
      }
      ...
  }
  </code></pre>
  
  <p><strong>OUTPUT CSS</strong></p>
  
  <pre><code>#home .foo .bar::before {
      content: "";
      position: absolute;
      margin: 2px;
      background: url("images/baz.png") 0 0 no-repeat;
      height: 39px;
      width: 56px;
  
  #home .foo .bar::before.item-1 {
      top: 0;
      right: 0;
  }        
  #home .foo .bar::before.item-2 {
      top: 10px;
      right: 20px;
  }
  #home .foo .bar::before.item-3 {
      top: 40px;
      right: 60px;
  }
  ...
  </code></pre>
  
  <p>Of course the problem is that the ampersand takes the whole root with the <code>::before</code> and add the class <code>.item-x</code> at the end of this so the css rule doesn't work. My desired output is <code>#home .foo .bar.item-2::before</code>. I'm not even sure that it's possible to nest that way so any help would be nice.</p>
  
  <p>Thanks for the help !</p>