Что такое css переменные и как их применять

Css
article image

CSS переменные (официальное название пользовательские свойства) во многом похожи на переменные в других языках программирования, позволяют вам записывать в них определенные значения, которые можно использовать повторно в CSS документе. Они определяются с помощью синтаксиса, который всегда начинается с двух тире (например --my-color: black;) и доступны при помощи функции var() (color: var(--my-color);). Пользовательские свойства очень полезны при использовании одинаковых свойств для разных элементов. Это могут быть цвета, размеры шрифта, отступы.

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* Глобальные переменные, определенные в элементе :root */
:root {
  --bg-color: #fff;
  --main-color: #000;
  --secondary-color: #222;
}

/* Элементы могут наследовать переменные от своих родителей */
body {
  background-color: var(--bg-color);
  color: var(--main-color);
}

small {
  color: var(--secondary-color);
}

/* Элементы могут определять свои собственные переменные 
и значения, переопределяя унаследованные */
body.dark {
  --bg-color: #080808;
  --main-color: #fff;
  --secondary-color: #ccc;
}

Еще один довольно полезный пример - определение общих, настраиваемых стилей для разных вариантов элемента.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.btn {
    --bg-color: #002299;
    --text-color: #fff;
    --highlight-color: #669900;
  
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* --highlight-color так же доступна потомкам .btn */
.btn .highlight {
    color: var(--highlight-color);
}

.btn-danger {
    --bg-color: #dd4a68;
    --text-color: #000;
    --highlight-color: #990055;
}

/* значение --highlight-color будет взято у .btn-danger */
.btn-danger .highlight {
    color: var(--highlight-color);
}

И напоследок, несколько полезных советов по использованию CSS переменных:

  • Вторым аргументом в функцию var(--text-color, black) можно передать значение, которое применится, если переменная --text-color не определена.
  • CSS переменные чувствительны к регистру. --main: red; и --Main: red; - разные переменные.
  • Они так же могут быть встроены в html разметку, как и другие стили. <div style="--text-color: red;">
  • Вы можете использовать функцию var() как колбэк для другой функции var(--main-color, var(--secondary-color)), а так же передать ее в различные функции CSS, например в calc(10px + var(--main-gap)) и даже присвоить значение одной переменной другой: --text-color: var(--main-color);

Источник: https://www.30secondsofcode.org/blog/s/css-variables