Media užklausos LESS'e

Sukurkime funkciją, kuri pridės elementui media užklausą. Tegu, pavyzdžiui, tai bus užklausa, reguliuojanti stilius mobiliems įrenginiams. Pavadinkime mūsų funkciją atitinkamai:

styles.less.mobile(@code) {

}

Mūsų funkcija parametru priims kodo bloką. Išveskime šį bloką media užklausos viduje:

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

Dabar panaudokime mūsų funkciją:

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

Rezultate, po kompiliavijos, mūsų div atsidurs media užklausos viduje, gaudamas atitinkamus stilius:

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