Media queries i LESS

Låt oss skapa en funktion som kommer att lägga till en media query till ett element. Låt oss som exempel ta en query som reglerar stilar för mobila enheter. Låt oss namnge vår funktion i enlighet med detta:

styles.less.mobile(@code) {

}

Vår funktion kommer att ta ett kodblock som parameter. Låt oss skriva ut detta block inuti media queryn:

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

Låt oss nu använda vår funktion:

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

Som ett resultat, efter kompilering, kommer vår div att hamna inuti media queryn och få motsvarande stilar:

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