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