Воплощение дизайнерского макета невозможно без использования HTML и CSS. Если язык разметки позволяет нам набросать шаблон из необходимых элементов, то CSS преобразует этот шаблон к нужному виду, как на исходнике. Казалось бы, с помощью чистого CSS можно сделать страницу такой, какой хотел видеть её заказчик.
Однако, если кто-то откроет ваш единственный CSS-файл и попытается что-то подправить, уверены ли вы, что код будет читаемым, редактируемым, структурированным и понятным? Если ваш проект огромен, состоит из множества частей, то уверены ли вы, что сможете с легкостью поддерживать его в будущем? Если использовать CSS-препроцессор, то ответ - да, к тому же это путь автоматизации верстки сайтов. Почему ? Сейчас узнаем.
В моем понимании, это надстройка над стандартным CSS, которая расширяет стандартные возможности, добавляет некоторые функции и позволяет писать более читаемый и удобный для понимания код. На выходе исходный код компилируется в привычный нам CSS. Использование подобного инструмента в современной разработке - “must have”, и я советую каждому верстальщику или разработчику ознакомиться с ним. Следует добавить, что есть с чего выбирать, ведь существует достаточно много CSS-препроцессоров, но следует выделить самые популярные:
Все вышеперечисленные препроцессоры имеют практически идентичный функционал, есть только небольшие различия в синтаксисе. Теперь, вернемся же к вопросу, озвученному ранее: какие преимущества дают нам препроцессоры, для того чтобы сделать наш код более удобным, и поддерживаемым? Это, прежде всего, вложенность. Такая особенность дает нам возможность структурировать элементы, с легкостью найти родителя элемента, быстро писать псевдоклассы и псевдоэлементы и даже использовать БЭМ! К примеру: .track
color: #fff
&__title
paddding: 10px
&:hover, &:focus
color: blue
Посмотрите на этот фрагмент кода, написанный на Sass. Всё это преобразуется в следующий CSS:
.track { color: #FFF;}.track__title { padding: 10px;}.track__title:hover, .track-title:focus { color: blue}
Лаконично, удобно, понятно, структура от родителя до потомка - здорово, не так ли? Вторым, и не менее важным, преимуществом, являются переменные. Принцип работы их предельно прост: имя переменной начинается с символа $ , а дальше само имя. Через двоеточие пишем значение - это может быть цвет в любом удобном виде, значения отступа, ширины, размера шрифта и так далее. В итоге мы получим примерно следующее:
$btn-color: blue;$font-main-size: 16px;
А использование будет выглядеть следующим образом:
.block {font-size: $font-main-size;}
Только представьте себе, как это удобно. Если вам нужно поменять цвет кнопок по всему сайту, то это достаточно сделать только в одном месте! Что же, идем дальше. Третье, и самое большое, что может нам предложить CSS-препроцессоров - это использования миксинов. В привычном для нас понимании, миксины - это функции, которые можно использовать несколько раз, не повторяя одни и те же части кода (помним об одном из принципов программирования - DRY - Don’t repeat yourself). Признаться честно, я не так часто использую миксины, видимо не было такой острой необходимости, однако несколько примеров я всё же покажу. Одна из самых используемых мной функций имеет следующий вид:
@function em($pixels, $context: $browser-context) {@if (unitless($pixels)) {$pixels: $pixels * 1px;}@if (unitless($context)) {$context: $context * 1px;}@return $pixels / $context * 1em;}
А её применение имеет следующий вид:
body {font-size: em(14px);}
Да, как вы поняли, это всего лишь преобразование размера шрифта из PX в Em (да здравствует те времена, когда для такой мелочи раньше пользовались специальным сервисами или считали сами на калькуляторе). Следующий пример также позволяет сэкономить много времени:
@mixin input-placeholder {&.placeholder { @content; }&:-moz-placeholder { @content; }&::-moz-placeholder { @content; }&:-ms-input-placeholder { @content; }&::-webkit-input-placeholder { @content; }}
Его использования:
input, textarea {@include input-placeholder {color: $grey;}}
Можно привести ещё множество примеров, однако, стоит начать использовать миксины самому, чтобы понять, насколько это полезный инструмент. Пожалуй, осталось ещё одна причина, которая заставит вас полюбить CSS-препроцессоры, и её имя - модульность. На дворе 2018 год, и модульность у нас повсюду - начиная от HTML-шаблонизаторов и заканчивая различными css фреймворками и сборщиками проектов.