Média lekérdezések LESS-ben

Készítsünk egy függvényt, amely hozzáad egy média lekérdezést az elemhez. Legyen ez például egy olyan lekérdezés, amely a mobil eszközök stílusait szabályozza. Nevezzük el a függvényünket ennek megfelelően:

styles.less.mobile(@code) {

}

A függvényünk paraméterként egy kódblokkot fog fogadni. Jelenítsük meg ezt a blokkot a média lekérdezésen belül:

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

Most használjuk a függvényünket:

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

Az eredmény a fordítás után az, hogy a div-ünk a média lekérdezésen belül fog megjelenni, a megfelelő stílusokat kapva:

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