Media Queries në LESS

Le të bëjmë një funksion që do të shtojë në element një media query. Le të jetë për shembull një query që rregullon stiljet për pajisjet mobile. Le ta emërojmë funksionin tonë në përputhje me rrethanat:

styles.less.mobile(@code) {

}

Funksioni ynë do të marrë si parametër një bllok kodi. Le ta vendosim këtë bllok brenda media query:

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

Tani le të përdorim funksionin tonë:

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

Si rezultat, pas kompilimit, div-i ynë do të gjendet brenda media query, duke marrë stiljet përkatëse:

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