Question

Per Sass文档：

@extend的工作原理是将扩展选择器插入扩展选择器出现的样式表中的任何位置。

这引起了我很大的冲突。具体来说，我有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规则。

Sass @extend订购 - 需要解决方法

1 个答案: