SCSS extend a nested selector and override the nested rulesets

Question

Ok so I have a placeholder with a nested selector:

%block {
  .title {
    font-size:12px;
  }
}

I want to extend it and ADD to the .

Answer 1

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;
}