2

我知道我可以@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 做到这一点,有没有首选的方法来达到同样的效果?)

4

1 回答 1

10

您必须以仅扩展您想要的部分的方式重写您的选择器:

%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;
    }
}
于 2012-09-06T19:07:29.333 回答