Понятно, что сегодня верстать страницы, у которых нет адаптивности, не имеет никакого смысла. Столько всяких устройств для получения и воспроизведения разной информации развелось, что игнорировать их просто невозможно. И в первую очередь - его Величество, телефон. Очевидно, что если он еще и не стал основным устройством для интернета, то очень скоро им станет. Попробуй его игнорировать… Можно, конечно, только это чревато - понятно чем. Не нужна никому будет такая ваша работа.
А обеспечивают эту самую адаптивность , как бы мы к этому не относились, media-запросы. Есть, конечно, новые свойства CSS3, которые облегчают задачу, но, все равно, без media-запросов не обойтись.
Ну и два слова о пользе препроцессоров. Писать на чистом CSS сегодня, наверное, не очень разумно, да и весьма трудоемко. Очень и очень на любителя. В настоящее время разработано множество разных инструментов, облегчающих, и, тем самым, ускоряющих верстку. Для сложных проектов используются серьезные инструменты, такие как Webpack и иже с ним. Но, во-первых, до таких проектов надо еще дорасти. Во-вторых, серьезные инструменты требуют серьезного времени на изучение. А в-третьих , не все же проекты создаются сложные. Вряд ли для них есть смысл использовать «навороченный» Webpack. А вот препроцессоры будут в самый раз. Автоматизировать, оптимизировать упрощать и ускорять написание кода на CSS в не очень сложных проектах . Так что, в своем сегменте препроцессоры заняли свое место очень основательно.
Всего известно несколько видов препроцессоров, среди которых, наверное, самые распространенные Sass, Less, Stylys. Из них я выбрал Sass.
Одним из главных инструментов препроцессора Sass являются миксины. Их основным назначением является объединение различных свойств таблиц CSS для их повторного использования. По сути, они являются обычными функциями, только не возвращают результат выполнения, а при вызове воспроизводят сгруппированные ранее в них свойства.
Объявляются миксины ключевым словом @mixin. Далее идет название миксина - name(arg1, arg2, …) {}. Далее, если есть аргументы, то они записываются в круглых скобках после названия. Если аргументов нет – скобки можно не писать. А далее в фигурных скобках пишутся свойства нужного тэга, класса или идентификатора.
Например,
Вызывается миксин ключевым словом @include. В рассмотренном случае это:
@include my_mixin(2em, $my_font_color)
При этом аргумент может задаваться числовым значением (первый аргумент в примере - 2 em), но значительно интересней задать его при помощи переменной. Это еще один очень ценный элемент препроцессора. То есть если есть какое-то свойство CSS, которое используется в разных местах программы с одним значением, то можно это значение присвоить переменной и дальше использовать ссылки на эту переменную. Очень удобно. Опять же, если нужно изменить ее значение, меняем его только в одном месте.
Чтобы объявить переменную, перед каким-то разумным или, точнее, осмысленным, ее названием пишется знак - $. А далее ей присваивается значение. Например,
$my_font_color: black; // присвоили черный цвет переменной
Но самое интересное на мой взгляд, это применение миксинов совместно с media-запросами.
Миксины и media-запросы
Вообще говоря, обеспечение адаптивности сайту, довольно муторное занятие. И во многом благодаря media-запросам. Обычно, если мы используем традиционный CSS для адаптивной страницы, то сначала описываем ее свойства для основного экрана, а затем для других разрешений экрана делаем media-запросы. И обычно размещаем их в конце основного кода. То есть основное свойство находится где-то в основном коде, а его изменения в media-запросах, то есть в конце. При редактировании отслеживать эти изменения крайне неудобно. Приходится постоянно пользоваться или навигатором по странице, который занимает драгоценное место на экране монитора, или пользоваться ползунком прокрутки. Тоже, то еще удовольствие, особенно, если кода несколько сотен строк. В результате потрачена уйма времени на все эти переходы (есть, конечно, великолепный Vim, но речь сейчас не о нем) и некоторое количество нервных клеток.
И как кажется, любое облегчение жизни в этом деле, может только радостно приветствоваться. И препроцессор дает такое облегчение, причем немалое - при совместном использовании миксинов и media-запросов. При их применении основное свойство и его изменения в media-запросах группируются в одном месте. Редактирование происходит легко и быстро. И не надо «прыгать» по всему коду, при этом вспоминая всякие неполезные слова. Очень удобно. При этом экономится очень много времени и верстка существенно ускоряется.
Реализуется все очень просто.
Например:
Объявляем миксин с именем my_media. Далее в его теле прописываем media-запрос на интервал разрешений экрана, например, 768px -1024px. Тут все традиционно. А вот в теле media-запроса пишем ключевое слово @content, вместо которого при вызове миксина, в его теле будут прописываться новые свойства для указанного разрешения экрана.
Осталось использовать созданный миксин. Возьмем уже упомянутый класс .text. Сначала укажем в нем некоторые свойства, скажем, размер и цвет шрифта для основного экрана. А затем при помощи my_media изменим эти свойства для интервала разрешений экрана, например, 768px -1024px. Для этого после свойств основного экрана вызываем миксин my_media, и все изменения запишем в его теле, в фигурных скобках.
Ну вот. Как-то так.
