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''};