Какие значения можно задать CSS переменной?

CSS переменные это сущности,, хранящие конкретные значения, которые можно повторно использовать в документе.

Они устанавливаются с использованием custom property нотации (например. –main-color: black;) и доступны через функцию var() (например. color: var(–main-color);) .

В CSS переменную можно записать:
1. Значения в различных единицах измерения, доступных в CSS

 :root {
   --nice-padding: 20px;
 }

 article {
   padding: var(--nice-padding);
 }

2. Небольшие вычисления с помощью calc() и другие CSS функции

 {
  --image-width: 800px;
  --image-height: calc(var(--image-width) / (4/3));
 }

 img {
   width: var(--image-width);
   height: var(--image-height);
 }

3. Просто числовые значения, которые затем можно использовать, например в calc()
:root { --magic-number: 41; } .crazy-box { width: calc(var(--magic-number) * 1%); } 4. Картинки, которые затем можно использовать в content или background
:root { --image-from-somewhere: url(https://codersblock.com/assets/images/logo.png); } .a { background-image: var(--image-from-somewhere); } И многое другое. Все возможные значения можно посмотреть в оригинальной статье.