Всем привет! При грамотном использовании переменных css, в значительной мере можно сократить код стилей.

Рассмотрим создание переменной:

:root{
    --black-color:black;
}

здесь мы через псевдоселектор root создали переменную --white-color со значением black. Отмечу что перед названием переменной всегда должно идти два девиза, а само название переменной остается на ваше усмотрение.

Мы можем создать сколько угодно переменных.

:root{
    --black-color:black;
    ...
    --width-norm:500px;
}

Теперь давайте воспользуемся нашей переменной:

body{
    background:var(--black-color);
}

как видите переменная вызывается с помощью функции var(). В данном примере мы через переменную --black-color фону тега body задали черный цвет. Данную переменную мы можем использовать в любом месте и свойстве проекта:

body{
    background:var(--black-color);
}
button{
    color:var(--black-color);
}

В чем же фишка использования переменных по сравнению со статическим присвоением значений свойств?

А в том что, если мы изменим значение переменной, то изменения вступят везде где мы ее использовали. Пример:

:root{
    --black-color:black;
}

body{
    background:var(--black-color);
}
button{
    color:var(--black-color);
}

@media screen and (max-width: 1000px) {
    :root{
        --black-color:red;
    }
}

здесь у нас изначально с помощью переменной --black-color задан черный цвет фону body и тексту button. Затем при изменении разрешения мы через медиа-запрос изменили значение переменной на red, то есть красный. И цвет фона и текста у наших элементов стал красным. Если мы хотим поменять значение переменной у определенного элемента, к примеру текста кнопки нам достаточно прописать так:

button{
    --white-color:red;
}

значение переменной будет изменено только для кнопок button.

Конечно использование переменных не должно становится самоцелью при проектировании всех проектов. Но в определенных моментах при грамотной подходе данное решение можем быть вполне актуально. Поэтому пользуйтесь с умом!

На этом у меня на сегодня все. Я желаю вам успехов и удачи! Пока!