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 .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

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 2

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.