title: SASS Parent selector from another selector with @at-root
body: <p>I have:</p>
  
  <pre><code>.parent {
     &amp;.change {
       .logo {
         width:100px;
       }
     }
  }
  
  
  .logo {
    &amp;.logo--one {
      border:1px solid #ccc;
    }
    &amp;.logo--two {
      border:1px solid #ddd;
    }  
    &amp;.logo--tree {
      border:1px solid #fff;
    }  
  }
  </code></pre>
  
  <p>I would like from inside of each logo name to be able to change a selector like</p>
  
  <pre><code>.parent.change .logo.logo--one {}
  </code></pre>
  
  <p>without having to repeat the logos names. I have a lot of logo names. Something like the code below that <strong>doesn't</strong> work as desired</p>
  
  <pre><code>.logo {
    &amp;.logo--one {
      border:1px solid #ccc;
      @at-root .what__should__be__here {
        width:100px;
      }
    }
    &amp;.logo--two {
      border:1px solid #ddd;
      @at-root .what__should__be__here {
        width:100px;
      }
    }  
    &amp;.logo--tree {
      border:1px solid #fff;
      @at-root .what__should__be__here {
        width:100px;
      }
    }  
  }
  </code></pre>
  
  <p>You can play with it here I think: <a href="http://sassmeister.com/gist/21b2886c6a572446684c" rel="nofollow">http://sassmeister.com/gist/21b2886c6a572446684c</a></p>