css – Sass @extend base/default还没有扩展伪类？

我知道我可以@extend .foo：hover,但有没有办法@extend .foobar基本/默认属性,而不扩展伪类的定义,如：hover,：active等？

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

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

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

(如果没有办法用Sass做到这一点,有没有一种方法可以达到同样的效果？)

解决方法

您必须以这样的方式重写选择器：您只需要精确扩展所需的部分：

%foo {
    color:blue;
}

.foo {
    @extend %foo;

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

.foobar {
    @extend %foo;

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

但是,根据您将如何扩展/重用.foo类,新的@content指令可能是更好的方法.

@mixin foo {
    color: blue;

    &:hover {
        @content;
    }
}

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

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