Incluir otra clase en SCSS

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 clase-b, me gustaría heredar todas las propiedades y declaraciones anidadas de class-a. Cómo se hace esto? Intenté usar @include class-a, pero eso solo arroja un error al compilar.

Author: Lorenzo Polidori, 2012-03-05
Source

5 answers

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

Uno solo puede hacer: 

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

.myotherclass {
  @extend .myclass;
  color: #000000;
}
 442
Author: F21,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-23 13:34:51

Prueba esto:

  1. Crear una clase base de marcador de posición (%base-class) con propiedades
  2. Extiende tu 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;
}
 10
Author: Ashwin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-09-17 05:06:41

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 estarán en una definición separada. Si varias clases se extienden, puede volverse difícil 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

 9
Author: Ari,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-20 22:01:14

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

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

Considerando que cada clase que comienza con "your-class-name" usa 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

 3
Author: Khanji,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-06 10:19:33 
@extend .myclass;
@extend #{'.my-class'};
 2
Author: mcmaxwell,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-03 12:24:09