首页 文章

SASS Mixin：如果类在链接上，则仅应用悬停样式？

提问于
浏览 次
2

我正在尝试使用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中这可能吗？

sass

1 回答

  • 1

    你需要 @at-root ：

    @mixin bg-color($color) {


 background-color: $color;
    @at-root {
       a#{&} {
          &:hover {
             background-color: darken($color, 10%);
          }
       }
    }
 }

 .bg-blue {
    @include bg-color(blue);
 }
    回复于

相关问题