Как переменные CSS могут улучшить эффективность и согласованность

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

Установите значение один раз и используйте его везде

В программировании переменная получает значение, которое позже может быть использовано в скрипте. Например, PHP-переменная $user_first_name может содержать логин пользователя, вошедшего в систему.

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

Возможно, вы слышали о переменных CSS-препроцессоров, таких как Sass. Эти переменные выполняют ту же роль. Тем не менее, они не являются нативными для CSS. Поэтому препроцессор должен преобразовать переменную в действительный CSS-код.

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

Пример переменной CSS

Цвет – одно из свойств, которое часто повторяется в CSS. Например, можно использовать один и тот же цвет для определенных заголовков, фона контейнера, кнопок и т.д. Использование переменной CSS упрощает этот процесс.

В качестве примера рассмотрим синий цвет Speckyboy. Сначала объявляем в CSS переменную:

: root { - speckyboy - blue : # 4F78A4; }

Переменной --speckyboy-blue в качестве значения присваивается шестнадцатеричный код цвета. Теперь чтобы оформлять им любой HTML-элемент, достаточно указать эту переменную следующим образом:

color: var(--speckyboy-blue);

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

Благодаря переменным CSS в приведенном выше фрагменте кода теперь потребуется изменить только шестнадцатеричный цвет --speckyboy-blue или значение в пикселях для --vmargin. Эти значения будут касаться каждого экземпляра в таблице стилей.

Копайте глубже

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