Sass Parent Selector – ‚&‘ (ampersand)

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?