inheritance - long - sass watch

Incluyendo otra clase en SCSS

Question

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 la class-a . ¿Cómo se hace esto? Intenté usar @include class-a , pero eso solo produce un error al compilar.

Answer 1

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

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

Mientras que todas las clases que comienzan con "su nombre de clase" usan este estilo.

Así que en tu caso, podrías 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 sobre los selectores de atributos en w3Schools

Answer 2

Parece que @mixin y @include no son necesarios para un caso simple como este.

Uno puede simplemente hacer:

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

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

Answer 3

Prueba esto:

1. Cree una clase base de marcador de posición (% clase base) con las propiedades comunes
2. Amplíe su clase (.my-base-class) con este marcador de posición.

3. Ahora puede extender% base-class en cualquiera de sus clases (por ejemplo, .my-class).

   %base-class {
      width: 80%;
      margin-left: 10%;
      margin-right: 10%;
   }
   
   .my-base-class {
       @extend %base-class;
   }
   
   .my-class {
       @extend %base-class;
       margin-bottom: 40px;
   }

Answer 4

Usar @extend es una buena solución, pero tenga en cuenta que el css compilado romperá la definición de clase. Cualquier clase que extienda el mismo marcador de posición se agrupará y las reglas que no se extiendan en la clase estarán en una definición separada. Si varias clases se extienden, puede ser ingobernable buscar un selector en las herramientas css o dev compiladas. Mientras que un mixin duplicará el código de mixin y agregará cualquier estilo adicional.

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

Answer 5

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