【问题标题】：@extend works only partially@extend 仅部分起作用
【发布时间】：2020-09-10 21:49:08
【问题描述】：

@extend 只能部分工作或@extend 内部的@at-root 问题 - Codepen

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

我的目标是扩展 a.link [&.link {…}] 和 .link [@at-root .link {…}] 类选择器从 within 父标签 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;
}

它编译成 with

的内容

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; }
}

【问题讨论】：

标签： html css sass

【解决方案1】：

很遗憾，您尝试做的事情是不可能的。

@extend 规则只扩展了简单的选择器。这就是为什么@at-root .link 有效，而&.link 无效。

看看这里@extend规则的限制：

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

【讨论】：