Inclure une autre classe dans SCSS

Question

Je l'ai dans mon fichier SCSS :

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

.class-b{

 //Inherite class-a here

 //some properties
}

Dans la classe B, j'aimerais hériter de toutes les propriétés et déclarations imbriquées de class-a . Comment faire ? J'ai essayé d'utiliser @include class-a mais cela provoque une erreur lors de la compilation.

Answer 1

On dirait que @mixin et @include ne sont pas nécessaires dans un cas aussi simple que celui-ci.

On peut se contenter de le faire :

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

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

Answer 2

Essayez ceci :

1. Créer une classe de base de remplacement (%base-class) avec les propriétés communes propriétés
2. Étendez votre classe (.my-base-class) avec cet espace réservé.

3. Vous pouvez désormais étendre %base-class à n'importe laquelle de vos classes (par exemple, .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 3

Il s'agit de toutes les règles de .someclass en .myclass

.myclass {
    @extend .someclass;
}

Answer 4

L'utilisation de @extend est une bonne solution, mais il faut être conscient du fait que le code CSS compilé brisera la définition de la classe. Toutes les classes qui étendent le même placeholder seront regroupées et les règles qui ne sont pas étendues dans la classe seront dans une définition séparée. Si plusieurs classes sont étendues, il peut devenir difficile de trouver un sélecteur dans la css compilée ou dans les outils de développement. Alors qu'un mixin dupliquera le code du mixin et ajoutera tous les styles supplémentaires.

Vous pouvez voir la différence entre @extend et @mixin dans ce qui suit sassmeister

Answer 5

Une autre option consisterait à utiliser un sélecteur d'attributs :

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

Alors que toutes les classes commençant par "votre-nom-de-classe" utilisent ce style.

Dans votre cas, vous pourriez donc procéder de la manière suivante :

[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%);
  }
}

En savoir plus sur les sélecteurs d'attributs sur w3Schools