Inclure une autre classe dans SCSS

309

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
}

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

inheritance sass F21
la source

Réponses:

624

Ressemble @mixinet @includen'est pas nécessaire pour un cas simple comme celui-ci.

On peut juste faire:

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

.myotherclass {
  @extend .myclass;
  color: #000000;
}
F21
la source
40
@extend fonctionne bien, mais ne fonctionnera pas si l'une des classes se trouve dans une directive (généralement une requête multimédia); à moins qu'ils ne figurent tous deux dans la même directive.
MartinAnsty
13
voir ici pour quelques faits amusants sur @extend- il y a des effets secondaires délicats que vous devez savoir: stackoverflow.com/questions/30744625/…
Toni Leigh
2
Merci @ToniLeigh, les PlaceHolder sont intéressants car ils économisent la génération d' un sélecteur CSS supplémentaire si le sélecteur parent n'est utilisé que pour étendre (non utilisé nulle part). Comme dans l'exemple ci .myclass- dessus, il n'est utilisé nulle part ailleurs (je suppose) .myotherclass, alors il vaut mieux avoir .myclassdéfini as %myclasset étendu .myotherclassas @extend %myclass;. Il générera comme.myotherclass{ font-weight: bold; font-size: 90px; color: #000000; }
Abhijeet
5
Exemple d'utilisation de Place Holder Vs Exemple d'utilisation de sélecteur de classe normal
Abhijeet
@MartinAnsty Eh bien, ça craint.
Abram
51

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;
}
Ashwin
la source
Je pense que cette réponse est la même que la plus populaire. Ai-je raison?
Yevgeniy Afanasyev
1
@Yevgeniy Afanasyev Non, vous n'étendez pas directement une classe, mais vous pouvez directement étendre un espace réservé.
Ashwin
Il n'a jamais été demandé :(
Yevgeniy Afanasyev
1
@Yevgeniy Afanasyev, l'extension directe de la classe (réponse la plus populaire) n'a pas fonctionné pour moi, mais l'extension d'un espace réservé a fait le travail. J'ai donc posté la réponse car ce n'est pas la même réponse.
Ashwin
3
Merci d'avoir publié une autre réponse, mais votre réponse ne précise pas pourquoi nous en avons besoin. Si vous pouvez ajouter plus de raisonnement pour clarifier un cas d'utilisation ou les avantages de cette approche, ce serait apprécié. Je vous remercie.
Yevgeniy Afanasyev
16

L'utilisation de @extend est une bonne solution, mais sachez que le CSS compilé brisera la définition de classe. Toutes les classes qui étendent le même espace réservé seront regroupées et les règles qui ne sont pas étendues dans la classe seront dans une définition distincte. Si plusieurs classes sont étendues, il peut devenir indiscipliné de rechercher un sélecteur dans le CSS compilé ou les outils de développement. Alors qu'un mixin va dupliquer le code mixin et ajouter des styles supplémentaires.

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

Ari
la source
Le lien sassmeister est rompu.
LexieHankins
11 
@extend .myclass;
@extend #{'.my-class'};
mcmaxwell
la source
22
Bien que ce code puisse répondre à la question, fournir un contexte supplémentaire concernant pourquoi et / ou comment ce code répond à la question améliore sa valeur à long terme.
adiga
2
@extend #{'.my-class', '.my-other-class'};
iarroyo
2
Quelle est la signification du hashbang ici?
Konrad Viltersten
7

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

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

Alors que chaque classe commençant par "votre-nom-de-classe" utilise ce style.

Donc dans votre cas, vous pouvez le faire comme ceci:

[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

Khanji
la source