css - SCSS extend a nested selector and override the nested rulesets -

ok have placeholder nested selector:

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

i want extend , add .title class:

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

the answer want this:

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

however, answer this:

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

am doing wrong or how works? clarify want merge it. if add directly inside .superblock , add .superblock2 extends %block merge without problems.

sass has no functionality "merging" duplicate selectors. you'll need find utility after css has been compiled.

the @extend directive isn't way use classes in place of mixins (similar less style mixin calls). why @extend works way 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 extend class suppresses emission of original class name.

now you've seen why @extend works way does, do still want @extend offers? if answer no, need use mixin:

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

output:

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