Media Queries in LESS

Lassen Sie uns eine Funktion erstellen, die einem Element ein Media Query hinzufügt. Nehmen wir als Beispiel eine Abfrage, die die Stile für Mobile Geräte steuert. Nennen wir unsere Funktion entsprechend:

styles.less.mobile(@code) {

}

Unsere Funktion wird einen Codeblock als Parameter entgegennehmen. Lassen Sie uns diesen Block innerhalb des Media Queries ausgeben:

styles.less.mobile(@code) {
  @media (max-width: 600px) {
    @code();
  }
}

Nutzen wir nun unsere Funktion:

styles.lessdiv {
  .mobile({
    width: 300px;
  });
}

Als Ergebnis wird nach dem Kompilieren unser div innerhalb des Media Queries liegen und die entsprechenden Stile erhalten:

styles.less@media (max-width: 600px) {
  div {
    width: 300px;
  }
}