Медиа упити у 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;
  }
}
Задание 1

Направите функцију tablet која дефинише стилове за таблете.

Задание 2

Направите функцију gadget која дефинише стилове за мобилне телефоне и таблете.

Задание 3

Направите функцију notebook која дефинише стилове за лаптопове.

Задание 4

Направите функцију desktop која дефинише стилове за десктоп рачунаре.