Das kaufmännische Und (&) in CSS-Pseudoelementselektoren entmystifizieren

Wenn man in CSS auf Code wie diesen stößt, fragt man sich natürlich über die Bedeutung des kaufmännischen Und (&) ) Zeichen:

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}

Es ist jedoch wichtig zu beachten, dass diese Syntax nicht Teil von CSS ist. Stattdessen gehört es zu einem CSS-Präprozessor namens LESS.

LESS ermöglicht Ihnen, Selektormodifikatoren mithilfe des kaufmännischen Und-Zeichens zu verschachteln. Dadurch können Sie prägnanten und lesbaren Code schreiben und Wiederholungen vermeiden. Zum Beispiel:

.clearfix { 
  &:before {
    content: '';
  }
}

Dies wird kompiliert zu:

.clearfix:before {
  content: '';
}

Das kaufmännische Und stellt sicher, dass die verschachtelten Selektoren zu .clearfix:before kompiliert werden. Ohne es würden sie zu .clearfix :before kompilieren, was zu einem ungültigen CSS-Selektor führen würde.

In dem von Ihnen bereitgestellten Twitter-Bootstrap-Beispiel wird das kaufmännische Und verwendet, um Stile auf Pseudoelemente (::before) anzuwenden und ::after), die als untergeordnete Elemente des .clearfix-Elements erstellt werden. Dadurch können Sie diese Pseudoelemente prägnant definieren und eine modulare Struktur innerhalb Ihres CSS beibehalten.