@extend 只部分工作

Question

@extend仅部分工作或在@extend中使用@at-root存在问题 - Codepen

---

那么——我正在快速键入一些动画，通过使用Sass将其下划线扩展到悬停时的全高度来突出显示锚点标签，但这不是重点。

我的目标是从父a标记内部扩展a.link [&.link {…}]和.link [@at-root .link {…}]类选择器。

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

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

这是有效的，除非我在我的 silent 类中添加 &:hover 伪选择器，然后它就不会扩展任何伪类/选择器。我知道在多个元素上使用 @extend 指令时它会生效。所以我们可以把问题的原因归结为 @at-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; }
}

- Simplicius

Answer 1

很遗憾，你想要做的事情是不可能的。 @extend规则只能扩展简单选择器。这就是为什么@at-root .link可以工作，而&.link不能的原因。

在这里查看@extend规则的限制： https://sass-lang.com/documentation/at-rules/extend#limitations

- Dan Mullin