მედიამოთხოვნები 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;
  }
}