Использование CSS @Variables

Я бы использовал препроцессор CSS, такой как Sass или Less.

Используемые вами переменные не входят в стандартную спецификацию CSS. Похоже, вы пишете в каком-то CSS-фреймворке.

Если вы действительно хотите использовать чистый CSS, вам придется каждый раз вручную устанавливать значения цветов / полей / отступов. Но в этом вам может помочь хорошая функция «Найти и заменить» в вашем любимом текстовом редакторе. :)

Если вы хотите использовать эти переменные, @Petah найдет для вас правильный ответ. :)

Используйте собственные переменные CSS3!

Переменные на самом деле являются встроенной функцией CSS3 - вы можете прочитать спецификацию на MDN. Однако это все еще относительно новая функция, поэтому вы можете ознакомиться с диаграммами поддержки браузера здесь перед их использованием.

При этом переменные CSS поддерживаются последними версиями Chrome, Firefox, Opera, Safari и Microsoft Edge.

В следующем коде показан пример использования переменных CSS:

:root {
    --name: #ff0000;
}
p {
    color: var(--name);
}

Как это работает?

Можно использовать переменные, если они определены в родительском контейнере элемента - здесь я использую :root, чтобы переменная была доступна везде.

Переменная может быть определена с помощью --name:content;, где name - это имя переменной, а содержимое - это содержимое переменной (это может быть цвет, например #ff0000, размер, например 1em, или одно из многих других возможных значений).

Затем просто используйте var(--name) вместо свойства в вашем коде CSS, где name - это снова имя, которое вы назвали переменной.

Насколько я понимаю, переменные еще не полностью поддерживаются, но вот как вы установите их, когда они есть:

/* declare in :root with the usual browser prefixes */
:root {
  var-myVariableColor: #f00;
  -webkit-var-myVariableColor: #f00;
  -moz-var-myVariableColor: #f00;
  -ie-var-myVariableColor: #f00;
}

/* to reference encase in var() */
body {
  background-color: var(myVariableColor);
}