我正在尝试使用mixin设置一堆背景颜色。如果将类分配给链接元素,我还想对这些背景颜色应用悬停样式:
@mixin bg-color($color) {
background-color: $color;
&[ifthisisalink] {
&:hover {
background-color: darken($color, 10%);
}
}
}
.bg-blue {
@include bg-color(blue);
}
因此,如果我们在普通div 上.bg-blue
,则没有悬停颜色。但是,如果.bg-blue
位于链接上,则会显示悬停颜色:
<div class="bg-blue">Hover on me and nothing happens.</div>
<a href="#" class="bg-blue">Hover on me and I go darker.</a>
这在 SASS 中可能吗?
你需要
@at-root
:
@mixin bg-color($color) {
background-color: $color;
@at-root {
a#{&} {
&:hover {
background-color: darken($color, 10%);
}
}
}
}
.bg-blue {
@include bg-color(blue);
}