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

Зачем нужны переменные в 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
Экзотические виды памяти
Экзотические виды памяти

Как насчёт памяти на барабанах или на проволоке?

medium
Двоичное счисление на пальцах

Все знают, что компьютеры состоят из единиц и нулей. Но что это значит на самом деле?

easy
Сила машин. Объясняем на пузырях
Сила машин. Объясняем на пузырях

Сила — в повторениях и абстракции.

hard
Самые интересные и необычные винтажные компьютеры
Самые интересные и необычные винтажные компьютеры

От перфокарт до транзисторов

easy
Решение матричных уравнений
Решение матричных уравнений

Финальная глава саги.

medium
Как пройти собеседование в ИТ-компанию
Как пройти собеседование в ИТ-компанию

Советы джунам, которые боятся отказа.

easy
Лучшие языки программирования для старта в 2020 году

Что выбрать, если хочешь стать программистом в этом году.

easy
«Никто не верил, что я сама пишу код»

Анастасия Никулина: о дата-сайнс, ютубе и программировании.

easy
Что такое RGB и CMYK
Что такое RGB и CMYK

Короткое объяснение цветовых моделей.

easy
Декомпозиция задач: что это и зачем нужно
Декомпозиция задач: что это и зачем нужно

И как сделать так, чтобы всё шло по плану.

easy
medium