Use trailing ampersand (&) as a class combination selector, not a descendant selector
<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>