Aufnahme einer weiteren Klasse in SCSS

309

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 erben class-a. Wie wird das gemacht? Ich habe versucht, zu verwenden @include class-a, aber das wirft nur einen Fehler beim Kompilieren.

inheritance sass F21
quelle

Antworten:

624

Sieht aus wie @mixinund @includewird für einen einfachen Fall wie diesen nicht benötigt.

Man kann einfach tun:

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

.myotherclass {
  @extend .myclass;
  color: #000000;
}
F21
quelle
40
@extend funktioniert einwandfrei, funktioniert jedoch nicht, wenn sich eine der Klassen in einer Direktive befindet (normalerweise eine Medienabfrage). es sei denn, beide befinden sich in derselben Richtlinie.
MartinAnsty
13
Hier @extendfinden Sie einige interessante
Toni Leigh
2
Vielen Dank @ToniLeigh, PlaceHolder sind interessant, da sie die Generierung eines zusätzlichen CSS-Selektors ersparen, wenn der übergeordnete Selektor nur zum Erweitern verwendet wird (nirgendwo verwendet). Wie im obigen Beispiel .myclasswird es nirgendwo anders verwendet (nehme ich an) als .myotherclass, dann ist es besser, als .myclassdefiniert %myclassund erweitert zu haben .myotherclassals @extend %myclass;. Es wird erzeugt als.myotherclass{ font-weight: bold; font-size: 90px; color: #000000; }
Abhijeet
5
Beispiel für die Verwendung von Platzhalter Vs Beispiel für die Verwendung eines normalen Klassenselektors
Abhijeet
@ MartinAnsty Nun, das ist scheiße.
Abram
51

Versuche dies:

  1. Erstellen Sie eine Platzhalter-Basisklasse (% Basisklasse) mit den allgemeinen Eigenschaften
  2. Erweitern Sie Ihre Klasse (.my-base-class) mit diesem 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;
}
Ashwin
quelle
Ich denke, diese Antwort ist die gleiche wie die beliebteste. Habe ich recht?
Jewgenij Afanasjew
1
@Yevgeniy Afanasyev Nein, Sie erweitern eine Klasse nicht direkt, aber Sie können einen Platzhalter direkt erweitern.
Ashwin
Es wurde nie gefragt :(
Jewgenij Afanasjew
1
@Yevgeniy Afanasyev, der die Klasse direkt erweitert (beliebteste Antwort), hat bei mir nicht funktioniert, aber die Erweiterung eines Platzhalters hat funktioniert. Daher habe ich die Antwort gepostet, da es nicht dieselbe Antwort ist.
Ashwin
3
Vielen Dank, dass Sie eine alternative Antwort veröffentlicht haben. Aus Ihrer Antwort geht jedoch nicht hervor, warum wir sie benötigen. Wenn Sie weitere Argumente hinzufügen können, um einen Anwendungsfall oder die Vorteile dieses Ansatzes zu verdeutlichen, wäre dies wünschenswert. Danke dir.
Jewgenij Afanasjew
16

Die Verwendung von @extend ist eine gute Lösung. Beachten Sie jedoch, dass das kompilierte CSS die Klassendefinition auflöst. Alle Klassen, die denselben Platzhalter erweitern, werden zusammengefasst, und die Regeln, die in der Klasse nicht erweitert werden, werden in einer separaten Definition angezeigt. Wenn mehrere Klassen erweitert werden, kann es unruhig werden, einen Selektor in der kompilierten CSS- oder den Dev-Tools nachzuschlagen. Während ein Mixin den Mixin-Code dupliziert und zusätzliche Stile hinzufügt.

Sie können den Unterschied zwischen @extend und @mixin in diesem Sassmeister sehen

Ari
quelle
Die Sassmeister-Verbindung ist unterbrochen.
LexieHankins
11 
@extend .myclass;
@extend #{'.my-class'};
mcmaxwell
quelle
22
Während dieser Code die Frage möglicherweise beantwortet, verbessert die Bereitstellung eines zusätzlichen Kontexts darüber, warum und / oder wie dieser Code die Frage beantwortet, ihren langfristigen Wert.
Adiga
2
@extend #{'.my-class', '.my-other-class'};
Iarroyo
2
Was bedeutet der Hashbang hier?
Konrad Viltersten
7

Eine andere Option könnte die Verwendung einer Attributauswahl sein:

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

Während jede Klasse, die mit "Ihr Klassenname" beginnt, diesen Stil verwendet.

In Ihrem Fall könnten Sie es also so machen:

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

Weitere Informationen zu Attributselektoren in w3Schools

Khanji
quelle