SCSS extend a nested selector and override the nes

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 .title class:

.superblock {
  @extend %block;
  .title {
    font-weight:bold;
  }
}

The answer I WANT is this:

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

However, the answer I get is this:

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

.superblock .title {
  font-weight: bold; }

Am I doing something wrong or is this just how it works? To clarify I want to merge it. If I add something directly inside the .superblock and add like another .superblock2 which also extends %block they merge without any problems.

Answer 1

This is pretty much it. SASS produces extended declarations separately.

And it has no functionality of grouping declarations by selector, it's not that smart.

But you need not worry that much about CSS cleanness. Modern web servers serve CSS gzipped, all duplication will be nicely compressed.

Answer 2

You can use a tools, I used it to clean the css https://github.com/addyosmani/grunt-uncss

"A grunt task for removing unused CSS from your projects with UnCSS."

Answer 3

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

Answer 4

LESS can do that. However you would write:

.superblock {
  .title {
    .block .title;
  }
}

Not sure if it works with @extend too.