В качестве предисловия к этой статье: препроцессоры можно использовать для различных типов файлов, но эта статья будет посвящена исключительно препроцессорам 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.