SCSS extend a nested selector and override the nested rulesets

Sass has no functionality for “merging” duplicate selectors. You’ll need to find another utility to do this after the CSS has been compiled.

The @extend directive isn’t just a way to use classes in place of mixins (similar to LESS style mixin calls). Why @extend works the way it does becomes clear when you’re extending normal classes instead of extend classes:

.block {
  font-size:12px;
}

.foo {
    @extend .block;
    font-weight: bold;
}

Output:

.block, .foo {
  font-size: 12px;
}

.foo {
  font-weight: bold;
}

Using an extend class just suppresses the emission of the original class name.

Now that you’ve seen why @extend works the way it does, do you still want what @extend offers? If the answer is no, then you need to use a mixin:

@mixin block {
    // styles
    .title {
        font-size: 12px;
        @content;
    }
}

.superblock {
    @include block {
        font-weight: bold;
    }
}

Output:

.superblock .title {
  font-size: 12px;
  font-weight: bold;
}