如何扩展一个类，并忽略萨斯的伪类[复制](How to extend a class and ign

这个问题已经在这里有一个答案：

• 萨斯@extend基地/默认不还扩展伪类？ 1个回答

是否有可能在萨斯到@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 sprite($pseudo: true) {
  background: red;

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

.sprite {
  @include sprite(true);
}

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

OUTPUT

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

.some-class {
  background: red;
}

举个例子： http://sassmeister.com/gist/1addc4ddc0c8111835ea

文章来源: How to extend a class and ignore the pseudoclass in Sass [duplicate]