Медиа заявки в LESS

Нека направим функция, която ще добавя към елемента медиа заявка. Нека за пример това да бъде заявка, регулираща стиловете за мобилни устройства. Ще наречем нашата функция съответно:

styles.less.mobile(@code) {

}

Нашата функция параметър ще приема блок код. Нека изведем този блок вътре в медиа заявката:

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

Сега ще използваме нашата функция:

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

В резултат след компилация нашият div ще се окаже вътре в медиа заявката, получавайки съответните стилове:

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