Медиазапросы в LESS

Давайте сделаем функцию, которая будет добавлять к элементу медиазапрос. Пусть для примера это будет запрос, регулирующий стили для мобильных устройств. Назовем нашу функцию соответственно:

styles.less.mobile(@code) {

}

Наша функция параметром будет принимать блок кода. Давайте выведем этот блок внутри медиазапроса:

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

Теперь воспользуемся нашей функцией:

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

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

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