Медиа упити у 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 која дефинише
стилове за десктоп рачунаре.