В качестве предисловия к этой статье: препроцессоры можно использовать для различных типов файлов, но эта статья будет посвящена исключительно препроцессорам CSS. Кроме того, я постараюсь избежать моей личной предвзятости и дать очень общее описание препроцессоров CSS, а не предпочитаемый мной препроцессор.
Введение
Прежде всего, что такое препроцессор? Чтобы дать вам простую аналогию, представьте, что вы говорите с кем-то на понятном вам языке, кто говорит с сильным акцентом или говорит на другом диалекте. Технически они говорят на том же языке, что и вы, но на самом деле понять, о чем они говорят, может быть практически невозможно.
В контексте CSS «обычным» или языком без акцента будет CSS, а версией с акцентом будет препроцессор! На практике это означает, что вы пишете выражения, которые напоминают стандартный CSS, но с некоторыми очень четкими отличиями в отношении его синтаксиса.
Как и в случае с обычным разговорным языком, мы мало что можем сделать с чем-то, чего не можем понять. К счастью, есть трансляторы, и то же самое можно сказать о препроцессорах. Код препроцессора может быть обработан (существует несколько различных способов сделать это), а затем появится понятный файл CSS со стандартным синтаксисом, готовый к использованию.
Вы можете спросить, зачем нам писать CSS каким-то странным образом? Отличный вопрос! Поскольку нашу ерунду можно перевести в обычный CSS, это позволяет нам писать очень надежные и даже динамические выражения CSS.
Новые игрушки
С препроцессором у нас есть набор функций, которые теперь доступны для использования вместе со всеми стандартными правилами CSS, которые мы привыкли писать.
Чтобы назвать несколько функций, поддерживаемых препроцессорами, у нас есть: функции, примеси, математика, переменные, операторы, условные операторы, итерация и многое другое, чтобы помочь вам быть более организованным и меньше писать в целом.
Переменные
Переменные резко повышают удобство сопровождения, делая так, что вам нужно изменить значение только в одном месте, чтобы повлиять на него везде, где оно использовалось. Представьте, например, что вы хотите добавить тему Хэллоуина в цвета своего сайта.
.elementOne {
background-color: orange;
}
.elementOne p {
color: black;
}
.elementTwo {
background-color: orange;
}
h3 {
color: black;
}
a:hover {
color:orange;
}
Чтобы изменить их обратно, вам потребуется пойти и изменить каждый экземпляр черного или оранжевого цвета. Тем не мение; с переменными вы можете сделать что-то вроде этого.
$theme-color-1: orange;
$theme-color-2: black;
.elementOne {
background-color: $theme-color-1;
}
.elementOne p {
color: $theme-color-2;
}
.elementTwo {
background-color: $theme-color-1;
}
h3 {
color: $theme-color-2;
}
a:hover {
color: $theme-color-1;
}
Определите значение переменной в одном месте, и везде, где она будет использоваться, будет ссылка на это значение. Хотите изменить все экземпляры черного обратно на серый? Просто измените определение переменной, и все готово.
Функции и друзья
Еще одной из самых больших функций будут функции. С их помощью вы можете настроить одно хорошо написанное определение функции, а затем расслабиться и позволить ему сделать всю тяжелую работу за вас!
Функции в сочетании с математикой, переменными, итерацией и условиями позволяют вам писать очень динамичные правила стиля. Подумайте о листах спрайтов, где значение позиции фона увеличивается с каждым оператором. Вместо того, чтобы записывать каждый вручную, создайте функцию, которая использует математику и итерацию для изменения положения фона.
Это очень простой пример, но я видел действительно впечатляющие и сложные проекты, созданные с использованием функций!
Селекторы
Одной из моих любимых особенностей препроцессоров являются новые селекторы. Родительская ссылка (&) позволяет сгруппировать ваши правила так, чтобы все, что относится к определенному элементу, можно было красиво сгруппировать.
.someElement {
some-rule: some-value;
&:hover {
color: some-color;
}
}
Компилируется в…
.someElement {
some-rule: some-value;
}
.someElement:hover {
color: some-color;
}
Родительский селектор сразу же берет все, что следует за ним, и прикрепляет его к родителю, под которым он вложен. В этом случае наведение будет добавлено к .someElement. Еще одна замечательная вещь, которую стоит проверить, — это корневая ссылка!
Вложение и общая эстетика
Формат CSS по умолчанию уродлив как грех. Бесконечный поток правил с едва заметными отступами, которые, надеюсь, организованы каким-то осмысленным образом. С препроцессорами CSS вложение — это замечательная функция, которая помогает вашим правилам стать более интуитивными/логически сгруппированными и повышает читабельность. Вложение может дать вашему CSS гораздо более четкую визуальную иерархию, мало чем отличающуюся от HTML.
.someElement {
some-rule: some-value;
.someOtherElement {
some-rule: another-value
}
}
Компилируется в…
.someElement {
some-rule: some-value;
}
.someElement .someOtherElement {
some-rule: another-value;
}
Полное раскрытие, ваш результирующий файл CSS, скорее всего, все равно будет выглядеть так, как будто кто-то уронил свою тарелку Alphaghetti в тарелку Alphabits, а затем бросил эту миску в стену. Тем не мение; файл, в котором вы на самом деле работаете, будет значительно красивее, и это все, о чем мы заботимся.
У некоторых людей есть проблемы с препроцессорами из-за переделанных селекторов, которые являются результатом слишком усердной работы с вложенностью. Простой способ избежать этого — ограничить глубину вложенности тремя уровнями. Что-то дальше этого становится довольно уродливым, но, эй, я не твой руководитель… если ты чувствуешь, что это необходимо, тогда делай то, что должен делать.
Зависит от обработки
Теперь, в зависимости от того, как вы решите обрабатывать код препроцессора, эти функции могут быть более или менее доступными. При этом я все еще чувствую, что они заслуживают упоминания.
Автоматическое обновление страницы, над которой вы работаете, — это небольшая привилегия, но я помню, как был очень рад узнать, что могу просто сохранить свой проект, и мне не придется спамить F5, как моя младшая сестра, пытающаяся купить билеты на Джастина Бибера в первом ряду онлайн. Просто сохраните, и он автоматически обновит ваш проект.
Еще один — префиксы поставщиков. Есть несколько способов перестать писать эти вещи каждый раз от руки. Будь то с помощью миксинов, функций или встроенной функции самого процессора, вы можете навсегда избежать написания этих ужасно монотонных префиксов.
Вывод
Поначалу может показаться, что вам нужно изучить и внедрить кучу новых вещей… но на самом деле, если вы уже знаете CSS, вы уже на полпути. Все, что вам нужно сделать, это изучить конкретный синтаксис и ознакомиться с новыми функциями, доступными вам с выбранным вами препроцессором. Интеграция препроцессоров в ваш рабочий процесс представляет собой мягкую кривую обучения с избытком преимуществ.
Эта статья ни в коем случае не является всеохватывающей, а скорее является примером, чтобы вызвать достаточный интерес, чтобы попробовать ее и узнать больше о препроцессорах.
На этой ноте есть ресурсы для сравнения препроцессоров, а также их опробования в Интернете. Каждый из них имеет свои преимущества, поэтому попробуйте их и найдите тот, который соответствует вашему стилю!
Первоначально опубликовано на https://www.loginradius.com.