css - Sass @extend 排序——需要解决方法

Question

根据 Sass 文档:

@extend works by inserting the extending selector anywhere in the stylesheet that the extended selector appears.

这让我很不爽。具体来说，我有 Sass 代码，我必须从中扩展并且我无权修改(它是自动生成的)，就像这样(代码仅用于代表性示例；我知道这不实用):

/* 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 */

然后我有我的本地 SCSS 代码:

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

请注意，我将 a.disabled 选择器放在最后，b/c，所有其他在特异性方面都相同，我希望 a.disabled 规则胜过所有其他(即我不希望当 disabled 链接悬停时链接变黑)。

为了完整性，html 标记:

<a href="http://www.pittsburghpenguins.com">Pittsburgh Penguins</a><br>
<a href="http://www.philadelphiaflyers.com" class=disabled>Philadelphia Flyers</a><br>

( JSFiddle )

正确的级联将指示带有 disabled 类的超链接在悬停时应保持灰色(这就是我将该规则放在 hover 规则之后的原因)。但是，b/c Sass 正在将 extending 类移动到样式表中 extended 类的位置，顺序被颠倒并且违反了级联。它们有效地改变了我的 CSS 的意图。

有什么办法可以解决这个问题吗？

Answer 1

a.disabled, a.disabled:hover 
{
  @extend %disabled-link; 
  cursor: default;
}

我认为这是因为 a.disabled 和 a:hover 是具有同等优先级的选择器。因此，如果未定义 a.disabled:hover，则将应用 a:hover 的规则。