SCSS extiende un selector nested y anula los conjuntos de reglas nesteds

Ok, entonces tengo un marcador de posición con un selector nested:

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

Quiero extenderlo y AGREGAR a la clase .title :

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

La respuesta que QUIERO es esta:

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

Sin embargo, la respuesta que obtengo es esta:

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

¿Estoy haciendo algo mal o es así como funciona? Para aclarar quiero fusionarlo. Si agrego algo directamente dentro del .superblock y agrego otro .superblock2 que también amplía% block, se fusionan sin ningún problema.

Sass no tiene ninguna funcionalidad para “fusionar” selectores duplicados. Tendrá que buscar otra utilidad para hacer esto después de que se haya comstackdo el CSS.

La directiva @extend no es solo una forma de usar clases en lugar de mixins (similar a las llamadas mixin de estilo LESS). ¿Por qué @extend funciona de la forma en que se hace claro cuando extiende clases normales en lugar de extender clases?

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

Salida:

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

Usar una clase extendida simplemente suprime la emisión del nombre de clase original.

Ahora que ya ha visto por qué @extend funciona de la manera que lo hace, ¿todavía quiere lo que ofrece @extend ? Si la respuesta es no, entonces necesitas usar un mixin:

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

Salida:

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

Esto es más o menos. SASS produce declaraciones ampliadas por separado.

Y no tiene la funcionalidad de agrupar declaraciones por selector, no es tan inteligente.

Pero no debes preocuparte tanto por la limpieza de CSS. Los servidores web modernos sirven CSS gzipped, todas las duplicaciones estarán muy bien comprimidas.

MENOS puede hacer eso. Sin embargo, usted escribiría:

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

No estoy seguro si funciona con @extend también.

Puede usar una herramienta, la utilicé para limpiar el CSS https://github.com/addyosmani/grunt-uncss

“Una gran tarea para eliminar CSS no utilizado de tus proyectos con UnCSS”.