Media queries in LESS

Laten we een functie maken die een media query aan een element toevoegt. Laten we voor het voorbeeld een query nemen die de stijlen voor mobiele apparaten regelt. Laten we onze functie dienovereenkomstig noemen:

styles.less.mobile(@code) {

}

Onze functie zal een codeblok als parameter accepteren. Laten we dit blok binnen de media query weergeven:

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

Laten we nu onze functie gebruiken:

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

Als resultaat, na compilatie, zal onze div binnen de media query terechtkomen en de bijbehorende stijlen krijgen:

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