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:

styles.less.hover(@code) {
  
}

Lassen Sie uns den übergebenen Code-Block innerhalb des Zustands hover ausgeben:

styles.less.hover(@code) {
  &:hover {
    @code();
  }
}

Verwenden wir unsere Funktion innerhalb eines Links:

styles.lessa {
  color: red;
  
  .hover({
    color: blue;
    text-decoration: none;
  });
}

Ergebnis der Kompilierung:

styles.cssa {
  color: red;
}
a:hover {
  color: blue;
  text-decoration: none;
}