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;
  }
}