АКЦИЯ: бесплатные месячные курсы по созданию сайтов
на выбор: верстка, JavaScript, PHP или фреймворки. Сегодня последний день для записи! Жми!
⊗mkLsBsMd 32 of 41 menu
Бесплатная Тренировка Верстки. Приглашаются желающие поверстать!

Медиазапросы в LESS

Давайте сделаем функцию, которая будет добавлять к элементу медиазапрос. Пусть для примера это будет запрос, регулирующий стили для мобильных устройств. Назовем нашу функцию соответственно:

.mobile(@code) { }

Наша функция параметром будет принимать блок кода. Давайте выведем этот блок внутри медиазапроса:

.mobile(@code) { @media (max-width: 600px) { @code(); } }

Теперь воспользуемся нашей функцией:

div { .mobile({ width: 300px; }); }

В результате после компиляции наш див окажется внутри медиазапроса, получив соответствующие стили:

@media (max-width: 600px) { div { width: 300px; } }

Сделайте функцию tablet, задающие стили для планшетов.

Сделайте функцию gadget, задающие стили для мобильников и планшетов.

Сделайте функцию notebook, задающие стили для ноутбуков.

Сделайте функцию desktop, задающие стили для декстопов.

enru