LESS: Mixins

In LESS können Attribute einer Klasse ganz einfach einer anderen übergeben werden. Wenn wir beispielsweise folgende Klasse nehmen:

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
    

Wenn wir diese Attribute nun in einer anderen Klasse verwenden möchten, fügen wir einfach den Namen der Klasse deren Attribute wir übernehmen möchten ein:

#menu a {
  color: #111;
  .bordered;
}
.post a {
  color: red;
  .bordered;
}
    

Die Werte der .bordered Klasse tauchen nun wie durch Magie in #menu a und .post a auf:

#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
    

Jede beliebige CSS Klasse, id oder element kann so verwendet werden.

Anmerkung: Variablen aus Mixins sind auch im aktuellen Geltungsbereich verfügbar. Dies ist allerdings umstritten und kann sich in Zukunft ändern.