Média dotazy v LESS

Vytvořme funkci, která bude přidávat k elementu média dotaz. Jako příklad to nechť je dotaz regulující styly pro mobilní zařízení. Pojmenujme naši funkci odpovídajícím způsobem:

styles.less.mobile(@code) {

}

Naše funkce bude parametrem přijímat blok kódu. Vypišme tento blok uvnitř média dotazu:

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

Nyní využijme naši funkci:

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

V důsledku po kompilaci se náš div ocitne uvnitř média dotazu, čímž získá odpovídající styly:

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