Как переменные 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. Стоит копнуть немного глубже, чтобы увидеть, как их использовать в более сложных сценариях.

Пожалуйста, оставляйте свои мнения по текущей теме статьи. За комментарии, дизлайки, лайки, отклики, подписки низкий вам поклон!

Пожалуйста, опубликуйте свои комментарии по текущей теме статьи. За комментарии, лайки, отклики, подписки, дизлайки низкий вам поклон!

Вадим Дворниковавтор-переводчик статьи «How CSS Variables Can Improve Efficiency and Consistency»