How can I overrule an @extend directive in SCSS?
<p>I have buttons inside a button group. Button groups come in different sizes, e.g. <code>button-group-large</code>. My goal is to avoid having to explicitly set the size on each button in a button group by letting it infer the size from the button group. That is, instead of </p>

<pre><code>&lt;div class="button-group-large"&gt;
  &lt;button class="button-large"&gt;Foo&lt;/button&gt;
  &lt;button class="button-large"&gt;Bar&lt;/button&gt;
&lt;/div&gt;
</code></pre>

<p>I would rather write this:</p>

<pre><code>&lt;div class="button-group-large"&gt;
  &lt;button&gt;Foo&lt;/button&gt;
  &lt;button&gt;Bar&lt;/button&gt;
&lt;/div&gt;
</code></pre>

<p>I can do it like this (in SASS):</p>

<pre><code>.button-group-large {
  button { @extend .button-large; }
}
</code></pre>

<p>This works but creates the following problem. If one of my buttons has a special class, the <code>.button-large</code> class will take precedence. That is, if I do </p>

<pre><code>&lt;div class="button-group-large"&gt;
  &lt;button class="special"&gt;Foo&lt;/button&gt;
  &lt;button&gt;Bar&lt;/button&gt;
&lt;/div&gt;
</code></pre>

<p>Then any attribute that differs between <code>.special</code> and <code>.button-large</code> will get the <code>.button-large</code> value instead of the <code>.special</code> value. I want this to be the opposite; <code>.special</code> should win here. (As a real world example, <code>.special</code> might set the a "primary" button color).</p>

<p>Here's a jsfiddle illustrating the problem: <a href="https://jsfiddle.net/wwr63qmv/3/" rel="nofollow">https://jsfiddle.net/wwr63qmv/3/</a></p>

<p>As a reference point, <a href="http://getbootstrap.com/components/#btn-groups" rel="nofollow">Bootstrap button groups</a> avoid this problem by requiring the classes to be set individually on each button, rather than on the button group. That may be the only answer. Is there some other way to get the <code>.special</code> class to win here?</p>