@extend仅部分起作用

问题描述

@extend仅部分起作用或在@extend内的@ at-root问题-Codepen

---

所以-我一直在快速键入一些动画来突出显示锚标记，方法是在Sass的帮助下将其下划线扩展到悬停时的完整高度，但这不重要。

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

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

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

这有效，除非我在我的静默类中添加一个&: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,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规则仅扩展简单的选择器。这就是@at-root .link有效但&.link无效的原因。

在这里查看@extend规则的局限性：

https://sass-lang.com/documentation/at-rules/extend#limitations