title: Use trailing ampersand (&) as a class combination selector, not a descendant selector
body: <p>I want to apply a class <code>.highlight</code> to a bunch of different elements and style them according to the element type. I could do this:</p>
  
  <pre><code>input[type="text"].highlight {...}
  select.highlight {...}
  someOtherSelector.hightlight {...}
  </code></pre>
  
  <p>But I'm trying to use the trailing ampersand (&amp;) to make my code more succinct.</p>
  
  <p>I've tried the following:</p>
  
  <pre><code>.highlight {
  
      input[type="text"].&amp; {
          border: 1px solid $brand-purple;
      }
  }
  </code></pre>
  
  <p>But I get the following error:</p>
  
  <blockquote>
    <p>Error: property "input" must be followed by a ':'</p>
  </blockquote>
  
  <p>I've also tried:</p>
  
  <pre><code>.highlight {
  
      input[type="text"]&amp; {
          border: 1px solid $brand-purple;
      }
  }
  </code></pre>
  
  <p>But I get the following error:</p>
  
  <blockquote>
    <p>Invalid CSS after "[type="text"]": expected "{", was "&amp;"
    "&amp;" may only be used at the beginning of a compound selector.</p>
  </blockquote>
  
  <p>Is there a way around this, or can this just not be done in SASS?</p>