Sass @extend ordering - Need workaround
<p>Per Sass documentation:  </p>

<blockquote>
  <p><code>@extend</code> works by inserting the extending selector anywhere in the stylesheet that the extended selector appears.</p>
</blockquote>

<p>This is causing me great strife.  Specifically, I have Sass code from which I must extend and I do not have the liberty to modify (it's auto-generated), like so (code made up for representative example only; I understand it's not practical):</p>

<pre><code>/* These styles cannot be updated (in a library, autogen'd, whatever) */
%base-link { color: blue }
%disabled-link { color: grey }
%hover-link { color: black }
/* End styles that cannot be updated */
</code></pre>

<p>I then have my local SCSS code:</p>

<pre><code>/* These styles are available for modification */
a:link { @extend %base-link }
a:hover { @extend %hover-link }
a.disabled 
{
  @extend %disabled-link; 
  cursor: default;
}
</code></pre>

<p>Note that I put the <code>a.disabled</code> selector last, b/c, all else equal in terms of specificity, I want the <code>a.disabled</code> rule to trump all others (i.e. I do not want the link to turn black when a <code>disabled</code> link is hovered).</p>

<p>For completeness, html markup:</p>

<pre><code>&lt;a href="http://www.pittsburghpenguins.com"&gt;Pittsburgh Penguins&lt;/a&gt;&lt;br&gt;
&lt;a href="http://www.philadelphiaflyers.com" class=disabled&gt;Philadelphia Flyers&lt;/a&gt;&lt;br&gt;
</code></pre>

<p>(<a href="https://jsfiddle.net/xLycrgrt/1/" rel="nofollow noreferrer">JSFiddle</a>)</p>

<p>Proper cascading would dictate that a hyperlink with the <code>disabled</code> class should remain grey on hover (that's why I put that rule after the <code>hover</code> rule).  However, b/c Sass is moving the <code>extending</code> class to the location of the <code>extended</code> class in the stylesheet, the ordering is upended and cascading is violated.  They are effectively changing the intent of my CSS.</p>

<p>Is there any way to work around this??</p>