Question

是否可以在Sass中@extend一个类，并且不包括一些伪类。

例如：

&.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>

在萨斯有没有办法做到这一点？

Answer 1

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

Answer 2

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

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

Answer 3

您不能排除伪类，但可以使用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;
}

示例：http://sassmeister.com/gist/1addc4ddc0c8111835ea

如何扩展一个类并忽略Sass中的伪类

3 个答案: