Я не скажу ничего нового, скорее всего, но я хочу показать, почему стоит использовать препроцессоры.
Переменные
Переменные — это нечто великолепное. Мне стали в упрек «препроцессоры были придуманы программистом, не верстальщиком», но как можно отказываться от переменных? Простой пример, который сильно облегчает жизнь — так как я в том числе еще и дизайнер, все цвета, настройки шрифтов и т.п. по проекту мне достаточно хранить в файле.
Вложенность
Что может быть лучше вложенности :hover, :after, :before, :nth-child в родительский элемент?
В нем я использую переменные, внутреннюю функцию darken() и ту самую вложенность. Казалось бы, мелочь, но из таких мелочей и состоит верстка. В разы удобнее смотреть, что относится к конкретному блоку, следя за тем, что находится внутри него, а не за тем, что идет ниже. Да и писать каждый раз .my-super-class:hover все-таки бессмысленно. Сторонники БЭМ-подхода оценили бы такую возможность, но у них там свои инструменты
Миксины, импорты и т.п.
Самый главный плюс препроцессоров — это в миксинах, экстендах и т.п. Это как функции в нормальном языке — можно использовать бесконечное количество раз, подключая когда необходимо.
Используется достаточно просто, как @media-queries: @include responsive(sm) { background-color: red } и это вместе с вложенностью элементов.
Импорты — существуют и в CSS, но не так, как хотелось бы. Т.к. речь идет о препроцессорах, в них в конечном счете все подключенные файлы собираются в один — и это полезно, потому что делается только один запрос на сервер. Для того, чтобы держать архитектуру проекта по неким модулям или просто блокам, импорты достаточно полезны.
#препроцессор #переменные #вложенность #миксины #Дневникпрограммиста
Присоединяйтесь — мы покажем вам много интересного
Присоединяйтесь к ОК, чтобы подписаться на группу и комментировать публикации.
Нет комментариев