Wie funktioniert das kaufmännische Und-Zeichen (&) in LESS, wenn es mit CSS-Pseudoelementen verwendet wird?

Ampersands in CSS-Pseudoelementen: EIN WENIGER Trick

In CSS wird das kaufmännische Und (&) normalerweise in Verbindung mit Pseudoelementen verwendet. wie :before und :after. Im Beispiel von Twitter Bootstrap wird das kaufmännische Und jedoch etwas anders verwendet.

Die fragliche Syntax lautet:

<code class="css">.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}</code>

Bei näherer Betrachtung stellen wir fest, dass dies der Fall ist kein reines CSS, sondern LESS, ein beliebter CSS-Präprozessor. In LESS ermöglicht das kaufmännische Und-Zeichen die Verschachtelung von Selektoren. Indem wir den Pseudoelementen den übergeordneten Selektor (&) voranstellen, können wir Folgendes erreichen:

<code class="less">.clearfix {
  &:before {
    content: '';
  }
}</code>

Dies wird wie folgt kompiliert:

<code class="css">.clearfix:before {
  content: '';
}</code>

Ohne das kaufmännische Und würden die Selektoren kompiliert zu .clearfix :before, was keine gültige CSS-Syntax ist. Daher wird in LESS das kaufmännische Und verwendet, um Selektormodifikatoren zu verschachteln, was einen prägnanteren und lesbareren Code ermöglicht.

Das obige ist der detaillierte Inhalt vonWie funktioniert das kaufmännische Und-Zeichen (&) in LESS, wenn es mit CSS-Pseudoelementen verwendet wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!