Как использовать переменные в CSS? Нужны ли Sass и Less?

При оформлении веб-страниц разработчикам часто приходится повторять одни и те же значения свойств в нескольких сегментах таблиц стилей - например, при использовании основного акцентного цвета для различных элементов веб-страницы.
Но теперь CSS поддерживает использование пользовательских свойств, также известных как переменные CSS, чтобы избежать повторения значений свойств CSS. Как и в любом популярном языке программирования, в CSS также реализованы переменные для написания чистого кода с продуктивным синтаксисом присвоения и извлечения, поддержкой диапазонов и обратных значений.

Если вы хоть немного знакомы с CSS, то наверняка слышали о таких препроцессорах CSS, как Sass и Less - и, возможно, даже использовали их в своих проектах с выбранным вами фронтенд-фреймворком. А может быть, и нет, и вы просто использовали старый добрый CSS.

В любом случае, главным преимуществом этих препроцессоров было то, что вы могли использовать переменные так же, как и в языке программирования. Вы объявляете переменную, присваиваете ей значение и используете ее во всем документе, чтобы упростить сопровождение. Теперь то же самое стало возможным и в CSS.В этой статье мы мягко введем вас в эту концепцию: сначала разберемся с переменными CSS, а затем создадим два простых проекта, в которых они используются.

Чтобы закрепить наши знания о переменных CSS, мы создадим два очень простых проекта:1) Вариации кнопок: Эта концепция популярна в Bootstrap, где определенные элементы используют общие правила CSS, которые придают им дизайн по умолчанию, но различаются цветами или другими свойствами.2) Отзывчивая форма входа в систему: Мы будем отображать разные макеты на экранах настольных компьютеров, планшетов и мобильных устройств.

Переменные CSS, также называемые пользовательскими свойствами или каскадными переменными, имеют огромное количество вариантов использования. Один из самых распространенных - управление веб-сайтами, в которых множество значений аналогичны значениям в документе.Давайте изучим основы переменных CSS, чтобы понять, как их использовать!

Чтобы объявить переменную в CSS, придумайте для нее имя, а затем добавьте два дефиса -- в качестве префикса, как показано ниже:

Под <selector> здесь понимается любой допустимый CSS-селектор, который вы используете для выбора HTML-элементов, например #element, .box h1 и другие.

Имя переменной - bg-color, и к нему добавлены два дефиса. Чтобы получить доступ к переменной, используйте функцию var() и передайте имя переменной:

Свойство background-color примет значение bg-color, которое мы объявили ранее. Чаще всего разработчики объявляют все свои переменные в элементе :root документа:

Объявление переменных здесь делает их глобальными и доступными для всего HTML-документа.

Как и традиционные свойства CSS, переменные CSS подчиняются стандартным правилам свойств - то есть они наследуются, могут быть переопределены и придерживаются алгоритма специфичности CSS. Значение элемента наследуется от его родительских элементов, если в конкретном дочернем элементе не определено пользовательское свойство, как показано в следующем примере.

HTML:

CSS:

В данном случае селектор .post-content наследует значение padding от своего непосредственного родителя, .post, со значением 1,5rem, а не 1rem. Вы можете использовать Chrome DevTools, чтобы увидеть, откуда наследуется конкретное значение CSS-переменной, как показано в следующем превью:

Вы можете использовать наследование переменных CSS для передачи значений переменных от родительских элементов к дочерним без повторного объявления их в селекторах. Кроме того, можно переопределять значения переменных как традиционные свойства CSS.

Каскадные правила CSS определяют приоритет определений CSS, которые поступают из разных источников.

Переменные CSS также подчиняются стандартным каскадным правилам, как и любые другие стандартные свойства. Например, если вы используете два селектора с одинаковым показателем специфичности, порядок назначения переменных будет определять значение конкретной CSS-переменной.

Назначение переменной в новом блоке CSS обычно отменяет существующий порядок и заново присваивает значения переменным.

Давайте разберемся в правилах каскадирования переменных на простом примере.

HTML:

CSS:

Приведенные выше селекторы CSS имеют одинаковую специфику, поэтому CSS использует каскадное старшинство для выбора правильного значения lbl-color для элементов. Здесь мы получим светло-зеленый цвет для элемента span, поскольку lightgreen находится в последнем назначении переменной. Цвет метки может меняться в зависимости от порядка следования вышеуказанных селекторов.

При использовании пользовательских свойств вы можете сослаться на пользовательское свойство, которое не определено в документе. Вы можете указать запасное значение, которое будет использоваться вместо этого значения.

Синтаксисом для указания запасного значения по-прежнему является функция var(). Отправьте резервное значение в качестве второго параметра функции var():

Вы заметили, что я неправильно написал значение --light-gray? Это должно привести к тому, что значение не будет определено, и браузер загрузит резервное значение #f0f0f0 для свойства color.

Как уже говорилось в предыдущих примерах, можно создавать глобальные переменные CSS с помощью правил :root или @property at-rule. Также создание локальных переменных возможно путем определения переменных внутри селекторов дочерних элементов. Например, переменная, определенная внутри header, не будет открыта для body.Однако если вы определите переменную внутри определенного тега

Здесь второй тег стиля становится доступным для обернутого элемента <div> благодаря at-правилу @scope. Таким образом, селектор кнопок во втором теге стиля выбирает только кнопки внутри родительского элемента <div>. В результате параметр --accent-color доступен только для первой кнопки.

Первая кнопка получает цвет #f2ba2c для фона, так как селектор кнопок в скопированном теге стиля устанавливает переменную --accent-color. Вторая кнопка получает резервный цвет фона #4cc2e6, так как переменная --accent-color недоступна в глобальной области видимости:

В таких CSS-фреймворках, как Bootstrap, переменные значительно упрощают разделение базового дизайна между элементами. Возьмем, к примеру, класс .bg-danger, который меняет цвет фона элемента на красный, а его собственный цвет - на белый. В этом первом проекте вы создадите нечто подобное.

Начните с первого проекта, добавив следующий HTML-документ в новый файл .html:

Структура этой разметки довольно стандартна. Обратите внимание, что каждый элемент кнопки имеет два класса: класс btn и второй класс. В данном случае мы будем называть класс btn базовым классом, а второй класс - классом-модификатором, который состоит из префикса btn-.

Далее добавьте следующее содержимое тега стиля к приведенному выше

Класс btn содержит базовые стили для всех кнопок, а вариации появляются там, где отдельные классы-модификаторы получают доступ к своим цветам, которые определяются на уровне :root документа. Это очень полезно не только для кнопок, но и для других элементов HTML, которые могут наследовать пользовательские свойства.

Например, если завтра вы решите, что значение пользовательского свойства --error слишком тусклое для красного цвета, вы можете легко изменить его на #f00000. Как только вы это сделаете, вуаля - все элементы, использующие это пользовательское свойство, будут обновлены одним изменением!

Вот как должен выглядеть ваш первый проект:

Вы можете получить доступ к полному исходному коду и посмотреть живое превью этого проекта с этого CodePen.

В нашем втором проекте мы создадим отзывчивую форму входа в систему, которая загружает некоторые значения настроек из переменных CSS. Как функция media query динамически переключает стандартные свойства CSS, так же она переключает и пользовательские свойства, поэтому мы можем присваивать переменным разные значения в разных точках разрыва отзывчивости.

Сначала добавьте следующее содержимое в новый HTML-документ:

Здесь мы создали простую форму входа в систему, состоящую из двух элементов ввода и кнопки. Добавьте следующий тег стиля в этот HTML-документ, чтобы придать ему правильный стиль:

Приведенный выше фрагмент CSS стилизует форму входа только для настольных устройств, поэтому она не будет отзывчиво подстраиваться под содержимое при изменении размера браузера, как показано в следующем превью:

Мы можем просто сделать эту страницу отзывчивой, написав некоторые корректировки стиля - т. е. изменив направление сгибания - внутри точек разрыва медиазапроса. Для свойств, основанных на значениях padding или font-size, мы можем использовать переменные CSS вместо повторяющегося написания свойств CSS, чтобы улучшить читаемость и удобство работы с определениями CSS.

Посмотрите на предыдущий фрагмент CSS: вы заметите три переменные CSS. Замените эти переменные блоками media query и завершите код отзывчивой обработки экрана с помощью следующего фрагмента кода:

Приведенный выше фрагмент кода настраивает макет для мобильных и планшетных экранов с помощью некоторых стандартных и пользовательских свойств CSS. Например, он использует другой режим гибкого направления, режим отображения для нескольких элементов и следующие значения пользовательских свойств для мобильных экранов:

Протестируйте этот проект, изменив размер окна браузера:

Попробуйте изменить эти переменные CSS и создать новые, чтобы еще больше улучшить этот экран входа в систему. Вы можете использовать ту же стратегию для использования переменных CSS в запросах контейнеров. Ознакомьтесь с полным исходным кодом и посмотрите живое превью из этого CodePen.

Переменные CSS помогают упростить создание веб-сайтов и сложных анимаций, позволяя при этом писать многократно используемый и элегантный код. Использование переменных CSS также возможно в проектах React Native, которые работают на веб-рендере React Native.

В нашем телеграм-канале еще больше информации