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