Einbindung einer weiteren Klasse in SCSS

Question

Ich habe dies in meiner SCSS-Datei:

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

.class-b{

 //Inherite class-a here

 //some properties
}

In Klasse b möchte ich alle Eigenschaften und verschachtelten Deklarationen von class-a . Wie wird das gemacht? Ich habe versucht, mit @include class-a aber das führt beim Kompilieren zu einem Fehler.

Answer 1

Sieht aus wie @mixin y @include sind für einen einfachen Fall wie diesen nicht erforderlich.

Man kann es einfach tun:

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

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

Answer 2

Versuchen Sie dies:

1. Erstellen Sie eine Platzhalter-Basisklasse (%base-class) mit der gemeinsamen Eigenschaften
2. Erweitern Sie Ihre Klasse (.my-base-class) um diesen Platzhalter.

3. Jetzt können Sie %base-class in jeder Ihrer Klassen erweitern (z.B. .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

Dies umfasst alle Regeln aus .someclass en .myclass

.myclass {
    @extend .someclass;
}

Answer 4

Die Verwendung von @extend ist eine gute Lösung, aber beachten Sie, dass die kompilierte CSS die Klassendefinition aufbricht. Alle Klassen, die denselben Platzhalter erweitern, werden gruppiert und die Regeln, die nicht in der Klasse erweitert werden, werden in einer separaten Definition aufgeführt. Wenn mehrere Klassen erweitert werden, kann es unübersichtlich werden, einen Selektor in der kompilierten CSS oder den Entwicklungswerkzeugen nachzuschlagen. Ein Mixin hingegen dupliziert den Mixin-Code und fügt alle zusätzlichen Stile hinzu.

Den Unterschied zwischen @extend und @mixin können Sie hier sehen Frechdachs

Answer 5

Eine andere Möglichkeit wäre die Verwendung eines Attributselektors:

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

Jede Klasse, die mit "Ihr-Klassen-Name" beginnt, verwendet diesen Stil.

In Ihrem Fall könnten Sie also so vorgehen:

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

Mehr über Attributselektoren auf w3Schulen