Anwendung von Code-Blöcken für Pseudo-Klassen in LESS
Lassen Sie uns eine Funktion erstellen, die
Stile für Links im Zustand hover festlegt.
Nehmen wir an, diese Funktion akzeptiert einen Code-Block als Parameter:
.hover(@code) {
}
Lassen Sie uns den übergebenen Code-Block innerhalb
des Zustands hover ausgeben:
.hover(@code) {
&:hover {
@code();
}
}
Verwenden wir unsere Funktion innerhalb eines Links:
a {
color: red;
.hover({
color: blue;
text-decoration: none;
});
}
Ergebnis der Kompilierung:
a {
color: red;
}
a:hover {
color: blue;
text-decoration: none;
}
Erstellen Sie eine ähnliche Funktion, die
Stile für ein Input-Feld im Zustand focus festlegt.
