Медыязапыты ў 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;
  }
}