Зачем нужны переменные в CSS
medium

Зачем нужны переменные в CSS

Чтобы работать со стилями ещё гибче и проще.

В проекте с колесом фортуны мы использовали переменные в CSS-файле, но толком не объяснили, как это всё работает. А вот как. 

В чём идея

В каждом языке программирования есть переменные. В них программы хранят промежуточные данные. Но в CSS исторически переменных не было — это же был просто язык оформления документов. 

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

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

Преимущество родных CSS-переменных в том, что они даже на готовой странице остаются переменными.

Как использовать

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

body {
--font-s: 20px;
}

Теперь эту переменную можно использовать вместо значений в свойствах стилей. Для этого пишем var(), а в скобках — название переменной. Когда браузер встретит такую конструкцию, он подставит вместо неё значение переменной.

body {
--font-s: 20px;
font-size: var(--font-s);
}

Значение по умолчанию

Иногда переменная, которую мы хотим подставить в какое-то место, может быть ещё не определена (например, скрипт ещё не сработал и не назначил ей никакого значения). В этом случае используют второй параметр для var():

var(Значение_переменной, Значение_по_умолчанию)

Использовать эту конструкцию можно так:

var(--font-s, 14px)

Когда браузер встретит этот фрагмент, он попробует найти переменную --font-s и взять её значение. Если такой переменной не будет или она пустая, то браузер вместо неё будет использовать значение 14px.

Область видимости

Переменные видны в том блоке, в которых их объявляют. 

Ещё переменные действуют во всех вложенных элементах внутри этого блока: если мы объявим переменную внутри блока body {} или html {}, то она будет действовать для всех элементов на странице, потому что они находятся внутри этих блоков. 

👉 Если нужна глобальная CSS-переменная, с которой нужно работать из любого места, её можно объявить внутри псевдокласса :root {}

:root {
--main-color: #ff6f69;
}

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

.alert {
--alert-color: #ff6f69;
}
.alert p {
color: var(--alert-color);
border: 1px solid var(--alert-color);
}

Зачем это нужно

Допустим, у нас есть фрагмент кода с определением оформления для двух тегов и одного класса:

p {
  font-size: 20px;
  color: #32590a;
}

a {
  font-size: 20px;
  color: #32590a;
}

.tags {
  font-style: italic;
  color: #32590a;
}

Если нам понадобится поменять везде размер шрифта и активный цвет, то придётся перебирать вручную все стили и смотреть, не забыли ли мы чего сделать. Вместо этого можно использовать переменные — так мы можем поменять значение в одном месте, и оно сразу будет использоваться во всех местах:

:root{
  --font-s: 20px;
  --color-f: #32590a;
}

p {
  font-size: var(--font-s);
  color: var(--color-f);
}

a {
  font-size: var(--font-s);
  color: var(--color-f);
}

.tags {
  font-style: italic;
  color: var(--color-f);
}

Какие браузеры поддерживают

Переменные в CSS поддерживают все современные браузеры, кроме Internet Explorer (но он не современный, вместо него Edge, который это поддерживает), поэтому эту технику можно использовать в любых новых проектах.

Текст и иллюстрации:

Михаил Полянин

Художник:

Даня Берковский

Корректор:

Ирина Михеева

Вёрстка:

Кирилл Климентьев

Соцсети:

Олег Вешкурцев

Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
Еще по теме
Как защитить сайт от хакерских скриптов
Как защитить сайт от хакерских скриптов

Включите политику безопасности.

medium
Бустинг — ещё один способ машинного обучения
Бустинг — ещё один способ машинного обучения

Как с помощью слабых алгоритмов сделать сильный.

medium
За что ты послал нам препроцессоры? Чем мы тебя прогневали?
За что ты послал нам препроцессоры? Чем мы тебя прогневали?

Что такое препроцессоры CSS и зачем они нужны.

medium
Vue.js — конструктор для веб-приложений
Vue.js — конструктор для веб-приложений

Переходим на новый уровень программирования

medium
Новые чудеса оптимизации: как делали игру «Принц Персии»
Новые чудеса оптимизации: как делали игру «Принц Персии»

Как сделать плавную анимацию, если доступно всего несколько кадров

easy
TypeScript — как JavaScript, но может больше
TypeScript — как JavaScript, но может больше

Способ избежать проблем JavaScript в больших проектах.

easy
Зачем на компьютере нужны разные пользователи
Зачем на компьютере нужны разные пользователи

Делаем жизнь друг друга проще

easy
Объяснение асимметричного шифрования без математики
Объяснение асимметричного шифрования без математики

Чтобы лучше понять принцип работы.

easy
Markdown: что это и кому нужно
Markdown: что это и кому нужно

Для всех, кто пишет контент, сайты и программы.

easy
medium