SASS/SCSS selectores de reglas @extend

Question

estoy teniendo un pequeño problema con la regla @extend, esto es lo que tengo (se centran en la h1):

.content-header { 
    // CSS properties 
    h1 { 
     // CSS properties 
    } 
} 

.box-header { 
    // CSS properties 
    h1 { 
     @extend .content-header h1; // My selector problem! 
     // And his own CSS properties 
    } 
} 

por lo que será:

.content-header h1, .box-header h1 { 
    /* Happily sharing the same CSS properties */ 
} 

Pero parece que @extend no me gusta, ¿hay alguna otra manera de escribir esto sin dar una clase al h1?

Answer 1

Los selectores anidados no se pueden extender, de hecho, ese es el error de sintaxis que informa el analizador. Dejando a un lado los comentarios estructurales (no puedo pensar en un escenario en el que se justifique la relación anterior @extend), esto no es algo que se pueda lograr actualmente con SASS.

Nota: esto es, sin embargo compatible con Stylus si está abierto.

Answer 2

Una solución obvia sería definir un nuevo @mixin your-name para sus definiciones .content-header h1 y @include your-name dentro de .box-header h1.

embargo, no es una solución mucho mejor Referencing Parent Selectors: &:

h1 { 
    .content-header &, 
    .box-header & { 
     // CSS properties 
    } 
    .box-header & { 
     // And his own CSS properties 
    } 
} 

No es evidente, porque la lógica inversa pero es mejor mantener. Está cambiando las definiciones de h1 para un selector específico.

Answer 3

Anidado @extender no está permitido. Pruebe esto para un trabajo en torno

.foo { 
    background-color: lime;  
} 
.b{ 
    margin:0px; 
} 
.baz { 
    @extend .foo; 
    @extend .b; 
} 

Algo he construido para mis personel utilizar a continuación para compartir con todos ustedes, este construye dinámicamente el selector, Desde caracteres especiales no están permitidos en las convenciones de nomenclatura que utilicé '-' para separar clase

$ih-classes: ("module--cardContainer--header", 
       "a" 
      ); 
    %module--cardContainer--header { 
    color: #1e1d1c; 
    background-color: #fff; 
    border-bottom: 0.0714rem solid #e0dddc; 
    padding: 0; 
    line-height: 3.1429rem; 
    font-size: 1.2857rem; 
    font-family: ProximaNovaSemiBold; 
} 
%a{ 
    color:red; 
} 

@function str-replace($string, $search, $replace: '') { 
    $index: str-index($string, $search); 

    @if $index { 
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); 
    } 

    @return $string; 
} 
@mixin generate-framework-code() { 

       @each $icon in $ih-classes { 
       $val : str-replace($icon, '--', ' .'); 
        .#{$val} { 
          @extend %#{$icon}; 
         } 
        } 
} 

@include generate-framework-code(); 

¡Buena suerte!