web-dev-qa-db-fra.com

Y compris une autre classe dans SCSS

J'ai ceci 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
}

En classe b, je voudrais hériter de toutes les propriétés et déclarations imbriquées de class-a. Comment est-ce fait? J'ai essayé d'utiliser @include class-a, mais cela ne génère qu'une erreur lors de la compilation.

inheritancesass
250
F21

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

On peut juste faire:

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

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

Essaye ça:

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

  3. Vous pouvez maintenant étendre% base-class dans 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;
}
30
Ashwin

Utiliser @extend est une bonne solution, mais sachez que les CSS compilés vont briser la définition de la classe. Toute classe qui étend le même espace réservé sera regroupée et les règles qui ne sont pas étendues dans la classe feront l'objet d'une définition séparée. Si plusieurs classes sont étendues, il peut devenir difficile de rechercher un sélecteur dans les outils compilés css ou dev. Alors qu'un mixin dupliquera le code mixin et ajoutera tout style supplémentaire.

Vous pouvez voir la différence entre @extend et @mixin dans ceci sassmeister

12
Ari

Une autre option pourrait être d'utiliser un sélecteur d'attribut:

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

Alors que chaque classe commençant par "your-class-name" utilise ce style.

Donc, dans votre cas, vous pourriez le faire comme suit:

[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

5
Khanji
@extend .myclass;
@extend #{'.my-class'};
3
mcmaxwell