SASS + BEM ist fast immer eine Übereinstimmung im Himmel, aber ein gemeinsamer Kampf von mir ist es zu verstehen, wie man BEM-Modifikatoren am besten für ein Element definiert, das seine Kind-Elemente beeinflusst, während die Eltern-Selektoren von SASS verwendet werden.
Ich habe die folgende Komponente in SASS unter Verwendung der BEM-Stilsyntax definiert:
%Vor%Das funktioniert gut wegen der Elternauswahl von SASS. Es hält relevanten Code organisiert und in sich abgeschlossen.
Wenn ich jedoch einen Modifizierer hinzufügen muss, der ein untergeordnetes Element mithilfe eines übergeordneten Selektors ändert, fällt die Idee schnell auseinander:
%Vor%Nein. Es erzeugt dies:
%Vor%Es wäre sinnvoller, diesen Selektor irgendwie zu bekommen:
%Vor%Der Grund dafür ist, dass Sie einfach einen Modifikator zum Element auf oberster Ebene hinzufügen können und sich auf alle oder alle untergeordneten Elemente auswirken.
Ich habe ein paar Ansätze ausprobiert:
Dies funktioniert (besonders in dieser vereinfachten Demonstration), aber in einem komplizierteren Satz von Komponenten mit vielen Modifikatoren kann dies ein potentieller Schmerz sein, um Fehler frei zu halten und zu bewahren. Außerdem wäre es schön, wenn möglich weiterhin SASS-Elternselektoren zu verwenden.
Das funktioniert gut. Aber es scheint irgendwie albern zu sein, das Element als Variable definieren zu müssen. Vielleicht ist es die einzige Möglichkeit, dies zu tun ... Ich bin mir nicht sicher. Gibt es bessere Möglichkeiten, dies zu strukturieren?
Sie können die Modifikatoren in einer anderen Struktur aufteilen, aber im .card Selektor wie folgt verschachtelt werden:
Was wiederum das bewirkt:
%Vor%Ich denke, das ist ein fast perfekter Weg, obwohl es nicht perfekt verschachtelt ist Ich hoffe, das war eine Hilfe!
Ich habe gerade einen viel besseren Weg gefunden, dies mit Sass zu erreichen, indem ich eine Variable benutze, um den Wert des Elternselektors zu speichern. Sie können ihn auf jeder Verschachtelungsebene verwenden!
Zum Beispiel speichere ich den Selektor .card in der Variablen $ this und benutze ihn wie folgt #{$this}
Also dieser Code
%Vor%wird nach
kompiliert %Vor%Diese Antwort wurde von diesem Artikel auf css-tricks inspiriert. Vielen Dank an Sergey Kovalenko
Sie können das gewünschte Ergebnis folgendermaßen erreichen:
%Vor%Wenn ich das gleiche Thema durchgehe, habe ich eine Bibliothek namens Superbem erstellt, bei der es sich im Grunde um eine Reihe von SCSS-Mixins handelt, die Ihnen beim Schreiben helfen BEM deklarativer Weg. Schau es dir an:
%Vor%Gibt Ihnen:
%Vor%Ich hoffe, Sie finden das nützlich!