Additional class when you use @extend

[fameches]

I use nested classes with &- syntax and @extend and I got on 8 line: .menu-image .menu-image-closed instead of just .menu-image-closed

.menu {
    &-image {
        .common-image-button {
            @media (max-width: 123) {
                transform: scale(0.8, 0.8);
            }
        }

        .common-image-button-closed {
            @extend .common-image-button;
            display: none;
            width: 38px;
            height: 38px;
        }

        &-closed {
            @extend .common-image-button-closed;
             display: block;
        }

        &-opened {
            @extend .common-image-button-closed;
        }
    }
}

[connorskees]

Hello,

This is the intended behavior of @extend.

Resolving parent selectors should make it a bit clearer,

.menu-image .common-image-button {
    @media (max-width: 123) {
        transform: scale(0.8, 0.8);
    }
}

.menu-image .common-image-button-closed {
    @extend .common-image-button;
    display: none;
    width: 38px;
    height: 38px;
}

.menu-image-closed {
    @extend .common-image-button-closed;
    display: block;
}

.menu-image-opened {
    @extend .common-image-button-closed;
}

In extending both .common-image-button and .common-image-button-closed, Sass will keep the prefix of .menu-image.

[mgreter]

Closing this as it is indeed working as intended.