Für eine Schulung zum Thema „Sass“ habe ich einige Möglichkeiten zum Einsatz des so genannten „Parent Selector“ zusammen gestellt.
Kurz notiert – was macht der „Parent Selector“?
Der „Parent Selector“ referenziert in einer verschachtelten Regel den Eltern-Selektor und verbindet beim Kompilieren die Knoten zum endgültigen Selektor. Das ‚&‘ Ampersand dient als Platzhalter. Hier ein einfaches Beispiel:
a {
color: blue;
&:focus,
&:hover { color: red; }
}
a {
color: blue;
}
a:focus, a:hover {
color: red;
}
Weitere Infos in der Sass Dokumentation.
Da seit der Sass-Version 3.3 das ‚&‘ (Ampersand) auch am Anfang von Selektoren verwendet werden kann und ich dahingehend meine Schulungsunterlagen anpassen wollte, habe ich ein paar Tests gemacht. Hier mal eine Zusammenstellung von ein paar Möglichkeiten:
$componentname: 'block';
.#{$componentname} {
$parent: &;
// .block.block
&#{&} { color: red; }
// .block + .block
& + & { color: purple; }
// .block__element
&__element { color: green; }
// .block .block__element
#{&}__element { color: maroon; }
// .block--modifier
&--modifier {
color: yellow;
// .block--modifier__element
&__element {
color: lime;
}
// .block--modifier .block__element
#{$parent}__element {
color: blue;
// .block--modifier .block__element > .block__more
> #{$parent}__more { color: white; }
}
}
// .block.block--no-img
&#{&}--no-img { color: teal; }
// div .block
div & { color: aqua; }
// div.block .block
div#{&} & { color: fuchsia; }
// div.block
@at-root {
div#{&} { color: gray; }
}
}
Sassmeister „Codepen“:
Play with this gist on SassMeister.
Die Möglichkeiten für BEM-Klassen-Strukturen sind interessant. Ich möchte auch hier dazu keine Diskussion entfachen, darum geht es hierbei nicht. Ich weiß, dass einige Entwickler es nicht mögen, wenn BEM-Klassen mit ‚&‘, (z.B. &__element
) zusammengesetzt in Sass verwendet werden, da es schwieriger ist bei der Suche im Projekt. Dennoch sehe ich dabei schon einige Vorteile und Sass wurde genau für das „DRY-Prinzip“ entwickelt.
Der Clou ist dabei ist, den Parent-Selektor in eine Sass-Variable innerhalb des Block zu referenzieren, also den Scope mitzuschleifen.
.block {
$parent: &;
&--modifier {
color: yellow;
#{$parent}__element {
color: green;
}
}
}
Das ergibt folgenden Selektor:
.block--modifier .block__element {}
Kennt ihr noch mehr Tricks?
Danke für den Tipp. 👍🏼