如何在Sass中扩展类并忽略伪类

在Sass中是否可以扩展一个类而不包括一些伪类

例如：

&.sprite-icon-thumbs-up {
    @include sprite(-130px, -239px, 51px, 22px);
}

&.sprite-icon-thumbs-up:hover {
    @include sprite(-185px, -239px, 51px, 22px);
}

稍后，我将包括

@extend

精灵：

.some-class {
    @extend .sprite;
    @extend .sprite-icon-thumbs-up;

    &.disabled {
        // here I would need it to override the hover so that when disabled I don't get the :hover sprite but I still get the normal sprite.
    }
}

我的第一个想法是：

    &.disabled:hover {
        @extend .sprite-icon-thumbs-up;  // But exclude the :hover from the extend
    }

我的HTML代码很简单，如下所示：

<span class="sprite sprite-icon-thumbs-up"></span>

---

在Sass中有什么方法可以做到这一点吗？

我不确定这是否可能。您可能只需要覆盖您的样式：

.some-class {
    @extend .sprite;
    @extend .sprite-icon-thumbs-up;

    &.disabled {
        // here I would need it to override the hover so that when disabled I don't get the :hover sprite but I still get the normal sprite.
        &:hover {
            // Overwrite extended hover styles here
        }
    }
}

---

您不能排除伪类，但可以使用mixin：查看以下示例：

@mixin sprite($pseudo: true) {
  background: red;

  @if $pseudo == true {
     &:hover {
      background: blue;
    } 
  }
}

.sprite {
  @include sprite(true);
}

.some-class {
  @include sprite(false);
}

输出

.sprite {
  background: red;
}
.sprite:hover {
  background: blue;
}

.some-class {
  background: red;
}

---

例如：

当您

@extend

选择器时，您将扩展它的每个实例。这包括匹配的伪类（

.foo:before

）和复合选择器（

.bar.foo.baz

）

如果这不是您想要的行为，则需要创建一个附加的选择器来扩展：

.sprite {
    // stuff
}

%foo, .sprite-icon-thumbs-up {
    @include sprite(-130px, -239px, 51px, 22px);
}

.sprite-icon-thumbs-up:hover {
    @include sprite(-185px, -239px, 51px, 22px);
}

.some-class {
    @extend .sprite;
    @extend %foo;
}

---

不错的清洁解决方案，听起来像是一个很好的解决办法，将铭记在心。我选择了一个不太好但非常干净的方法。。。我介绍了两次sprite:）在我的例子中是可以的，因为它非常小，在png:D上已经是空白了。这是我第一次尝试，但不起作用。如果只是覆盖样式，什么不起作用？