it-swarm.com.de

Less: Schreibweise: Schweben und: Fokussieren

Ich habe gerade angefangen, Less zu lernen und möchte folgendes Ergebnis haben:

.navbar .nav > li > a {
   /* some rules */
} 

.navbar .nav > li > a:hover {
   /* some rules */
} 

.navbar .nav > li > a:focus {
   /* some rules */
}

Ich kann nicht herausfinden, wie man das in Less schreibt. Ich habe es versucht

.navbar .nav > li > a {
    /* some rules */
    &:hover {

    }
    &:focus {

    }
}

aber das geht nicht. Bitte helfen Sie. Vielen Dank.

29
Pelangi

Das ist im Wesentlichen das richtige Format für das Verschachteln, aber es ist ein wenig unklar, was Sie erwarten. Vielleicht erwarten Sie Vervielfältigung des /* some rules */ in den :hover und :focus (nur basierend auf dem, was Sie oben für die Eingabe und Ausgabe angegeben haben -- wenn dies kein korrektes Verständnis Ihres Problems ist, klären Sie es bitte). So funktioniert das Verschachteln jedoch nicht. Beim Verschachteln wird nur die Auswahlzeichenfolge ausgewählt, an die die Pseudoklasse angehängt werden soll. Die definierten Regeln werden nicht automatisch ausgefüllt außerhalb davon hinein davon. Sie müssen expliziter sein als eine der folgenden Optionen:

Option 1 (mit Verschachtelung)

.navbar .nav > li > a {
    /* some rules */
    &:hover {
      /* some rules */
    }
    &:focus {
      /* some rules */
    }
}

Option 2 (genau wie CSS)

.navbar .nav > li > a,
.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus {
    /* some rules */
}

Option 3 (Verschachtelung mit einem Mixin)

.setRules() {
    /* some rules you type once */
}

.navbar .nav > li > a {
    .setRules();
    &:hover {
      .setRules();
    }
    &:focus {
      .setRules();
    }
}
41
ScottS