Incluyendo otra clase en SCSS

309

Tengo esto en mi archivo SCSS:

.class-a{
  display: inline-block;
  //some other properties
  &:hover{
   color: darken(#FFFFFF, 10%);
 }  
}

.class-b{

 //Inherite class-a here

 //some properties
}

En la clase b, me gustaría heredar todas las propiedades y declaraciones anidadas de class-a. ¿Cómo se hace esto? Intenté usarlo @include class-a, pero eso solo arroja un error al compilar.

inheritance sass

— F21
fuente

624

Parece @mixiny @includeno es necesario para un caso simple como este.

Uno solo puede hacer:

.myclass {
  font-weight: bold;
  font-size: 90px;
}

.myotherclass {
  @extend .myclass;
  color: #000000;
}

— F21
fuente

40

@extend funciona bien, pero no funcionará si alguna de las clases está dentro de una directiva (generalmente una consulta de medios); a menos que ambos estén en la misma directiva.

— MartinAnsty

13

vea aquí algunos datos divertidos sobre @extend- hay algunos efectos secundarios difíciles que debe tener en cuenta: stackoverflow.com/questions/30744625/…

— Toni Leigh

2

Gracias @ToniLeigh, los PlaceHolder son interesantes ya que ahorran la generación de un selector CSS adicional si el selector principal solo se usa para extender (no se usa en ninguna parte). Al igual que en el ejemplo anterior, .myclassno se usa en ningún otro lugar (supongo) aparte de .myotherclass, entonces es mejor haber .myclassdefinido %myclassy extendido .myotherclasscomo @extend %myclass;. Se generará como.myotherclass{ font-weight: bold; font-size: 90px; color: #000000; }

— Abhijeet

55

Ejemplo de uso de Place Holder Vs Ejemplo de uso de selector de clase normal

— Abhijeet

@MartinAnsty Bueno, eso apesta.

— Abram

51

Prueba esto:

Crear una clase base de marcador de posición (% base-class) con las propiedades comunes
Extienda su clase (.my-base-class) con este marcador de posición.

Ahora puede extender% clase base en cualquiera de sus clases (por ejemplo, mi clase).

%base-class {
   width: 80%;
   margin-left: 10%;
   margin-right: 10%;
}

.my-base-class {
    @extend %base-class;
}

.my-class {
    @extend %base-class;
    margin-bottom: 40px;
}

— Ashwin
fuente

Creo que esta respuesta es la misma que la más popular. Estoy en lo cierto?

— Yevgeniy Afanasyev

1

@Yevgeniy Afanasyev No, no extiende una clase directamente, pero puede extender directamente un marcador de posición.

— Ashwin

Nunca se le preguntó :(

— Yevgeniy Afanasyev

1

@Yevgeniy Afanasyev extender la clase directamente (la respuesta más popular) no funcionó para mí, pero extender un marcador de posición hizo el trabajo. Por lo tanto, publiqué la respuesta, ya que no es la misma respuesta.

— Ashwin

3

Gracias por publicar una respuesta alternativa, pero no está claro en su respuesta por qué la necesitamos. Si puede agregar más razonamientos para aclarar un caso de uso o las ventajas de este enfoque, se lo agradeceríamos. Gracias.

— Yevgeniy Afanasyev

16

Usar @extend es una buena solución, pero tenga en cuenta que el CSS compilado romperá la definición de la clase. Cualquier clase que extienda el mismo marcador de posición se agrupará y las reglas que no se extiendan en la clase se definirán por separado. Si se amplían varias clases, puede resultar desordenado buscar un selector en el css compilado o en las herramientas de desarrollo. Mientras que un mixin duplicará el código mixin y agregará cualquier estilo adicional.

Puedes ver la diferencia entre @extend y @mixin en este sassmeister

— Ari
fuente

El enlace sassmeister está roto.

— LexieHankins

11

@extend .myclass;
@extend #{'.my-class'};

— mcmaxwell
fuente

22

Si bien este código puede responder a la pregunta, proporcionar un contexto adicional con respecto a por qué y / o cómo este código responde a la pregunta mejora su valor a largo plazo.

— adiga

2

@extend #{'.my-class', '.my-other-class'};

— iarroyo

2

¿Cuál es el significado del hashbang aquí?

— Konrad Viltersten

7

Otra opción podría ser usar un selector de atributos:

[class^="your-class-name"]{
  //your style here
}

Mientras que cada clase que comienza con "your-class-name" usa este estilo.

Entonces, en su caso, podría hacerlo así:

[class^="class"]{
  display: inline-block;
  //some other properties
  &:hover{
   color: darken(#FFFFFF, 10%);
 }  
}

.class-b{
  //specifically for class b
  width: 100px;
  &:hover{
     color: darken(#FFFFFF, 20%);
  }
}

Más información sobre los selectores de atributos en w3Schools

— Khanji
fuente