Sass @extend base / default不扩展伪类？ [英] Sass @extend base/default without also extending pseudo-classes?

问题描述

我知道我可以@extend .foo：hover，但是有一种方法@extend .foobar基础/默认属性，而不扩展伪类的定义，如：hover，：active，etc？

I know I can @extend .foo:hover, but is there a way to @extend the .foobar base/default properties without also extending the definitions for pseudo-classes like :hover, :active, etc?

例如，如何更改以下内容，使.foobar仅扩展.foo的默认状态？

For example, how would I change the following such that .foobar extends only .foo's default state?

.foo {
    & {
         color:blue;
    }
    &:hover {
         background-color: black;
    }
}

.foobar {
     @extend .foo;
     &:hover {
          //As is, I have to override. Any better way?
          background-color: transparent;
     }
}

（如果没有办法，是否有一个首选的方法来实现相同的效果？）

(If there is no way to do this with Sass, is there a preferred way to achieve the same effect?)

推荐答案

你必须重写你的选择器，只延伸您想要的部分：

You have to rewrite your selectors in such a way that you only extend exactly the part you want:

%foo {
    color:blue;
}

.foo {
    @extend %foo;

    &:hover {
         background-color: black;
    }
}

.foobar {
    @extend %foo;

    &:hover {
         background-color: transparent;
    }
}

但是，根据您的扩​​展方式/重用你的.foo类，新的@content指令可能是更好的方式。

However, depending on how you are going to be extending/reusing your .foo class, the new @content directive might be the better way to go.

@mixin foo {
    color: blue;

    &:hover {
        @content;
    }
}

.foo {
    @include foo {
        background-color: black;
    }
}

.foobar {
    @include foo {
        background-color: transparent;
    }
}

这篇关于Sass @extend base / default不扩展伪类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！