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

Essayez ceci :

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

.class-a {
    @include class-a;
}

.class-b {
    @include class-b;
}

Vous pouvez également essayer ceci :

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

Answer 2

Combiner Mixin et Extend

Je viens de tomber sur une combinaison de Mixin et Extend :

blocs réutilisés :

.block1 { box-shadow: 0 5px 10px #000; }

.block2 { box-shadow: 5px 0 10px #000; }

.block3 { box-shadow: 0 0 1px #000; }

mixin dynamique :

@mixin customExtend($class){ @extend .#{$class}; }

utiliser le mixin :

comme : @include customExtend(block1);

h1 {color: fff; @include customExtend(block2);}

Sass ne compile que le contenu des mixins dans les blocs étendus, ce qui lui permet de combiner des blocs sans générer de code dupliqué. La logique Extend ne met que le nom de classe de l'emplacement d'importation du Mixin dans le bloc1, ..., ... {box-shadow : 0 5px 10px #000;}

Answer 3

En SCSS, vous devez définir un mixin avant d'utiliser @include

@mixin red_border($border_width) {
  border: $border_width solid red;
}

#box_a {
  @include red_border(5px);
}