Html @仅部分扩展工作 @extend仅部分工作，或在@extend-

所以-我一直在快速输入一些动画，通过在Sass的帮助下在悬停时将其下划线扩展到全高来突出显示锚定标记，但这不是重点

我的目标是从父

a

标记中扩展

a.link[&.link{…}]

和

.link[@at root.link{…}]

类选择器

a {
  &.link { @extend %animation--anchor; }

  @at-root .link { @extend %animation--anchor; }
}

这是可行的，除非我在静默类中添加一个

&:hover

伪选择器，否则它不会扩展任何伪类/选择器。我知道当在多个元素上使用

@extend

指令时，它会起作用。因此，我们可以将问题的原因隔离到root.link上的

@选择器


下面是它编译为而不使用伪类/选择器的内容

a.link, .link {
  position: relative;
  text-decoration: none;
  border-bottom: solid 2px #2196f3;
}

它编译为的内容与

a.link, .link {
  position: relative;
  text-decoration: none;
  border-bottom: solid 2px #2196f3;
}
.link:hover::before {
  height: 100%;
}
.link::before {
  content: "";
  position: absolute;
  bottom: -1px;
  height: 1px;
  width: 100%;
  background-color: #2196f3;
  z-index: -1;
  transition: height 500ms cubic-bezier(0.25, 0.1, 0.2, 1.5);
}


这是有问题的代码

$disable-inherited-anchorStyling: true;

$anchor--underlineColor: #2196f3;
$transition--short: 500ms;
$transition--in-out: cubic-bezier(0.25, 0.1, 0.2, 1.5);

%animation--anchor {
  position: relative;
  text-decoration: none;
  border-bottom: solid 2px $anchor--underlineColor;

  &:hover::before {
    height: 100%;
  }

  &::before {
    content: "";
    position: absolute;
    bottom: -1px;
    height: 1px;
    width: 100%;
    background-color: $anchor--underlineColor;
    z-index: -1;
    transition: height $transition--short $transition--in-out;
  }
}

a {
  @if ($disable-inherited-anchorStyling) {
    color: inherit;

    &:focus {
      outline: 0;
    }
  }

  &.link { @extend %animation--anchor; }

  @at-root .link { @extend %animation--anchor; }
}

不幸的是，你想做的是不可能的

@extend
规则仅扩展简单选择器。这就是为什么根目录下的
@link
有效，而
&.link
无效的原因

请看一下
@extend
规则的限制：