2

.foo：hoverを@extendできることは知っていますが、：hover、：activeなどの疑似クラスの定義を拡張せずに.foobarのbase / defaultプロパティを@extendする方法はありますか？

たとえば、.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 に答える