如何扩展一个类并忽略 Sass 中的伪类 [英] How to extend a class and ignore the pseudoclass in Sass

问题描述

是否可以在 Sass 中 @extend 一个类而不包含一些伪类.

Is it possible in Sass to @extend a class and to not include some pseudoclass.

例如:

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

我的第一个想法是做类似的事情:

My first thought was to do something like:

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

我的 HTML 代码很简单:

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

有没有办法在 Sass 中做到这一点?

Is there some way to do that in Sass?

推荐答案

当你@extend一个选择器时，你扩展了它的每个实例.这包括匹配伪类(.foo:before)和复合选择器(.bar .foo .baz).

When you @extend a selector, you extend every instance of it. That includes matching pseudoclasses (.foo:before) and compound selectors (.bar .foo .baz).

如果这不是您想要的行为，那么您将需要创建一个额外的选择器来扩展:

If this is not the behavior you want, then you will need to create an additional selector to extend from:

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

这篇关于如何扩展一个类并忽略 Sass 中的伪类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！