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

Понимание переменных CSS
Многоразовые значения таблицы стилей можно определить и использовать повсюду с помощью переменных CSS. Они объявляются с использованием префикса —, за которым следует имя, обычно внутри псевдокласса :root для глобальной доступности. Их можно использовать для хранения таких значений, как шрифты, цвета, ширина, высота и т. д. Эти переменные можно использовать даже в других файлах, если они определены в коде CSS. (Подробнее)

Вот как определяется переменная CSS:

:root {
  --main-color: #3498db;
}

В этом примере мы определили переменную с именем –main-color и ее значение #3498db. Мы объявили ее в псевдоклассе :root, что гарантирует доступность переменной в любом месте CSS-кода.

Как использовать переменные CSS
После определения вы можете использовать переменные CSS в любом месте вашего кода CSS, используя функцию var() для доступа к ним.

Var():

Переменная CSS var() позволяет вводить значение пользовательского свойства, чтобы заменить часть значения другого свойства..

Синтаксис:

var(--custom-property);

Пример :

.element {
  color: var(--main-color);
}

В этом примере мы используем переменную –main-color для установки цвета текста элемента. Если вы позже решите изменить основной цвет, все, что вы можете сделать, это обновить значение переменной, и оно автоматически отразится на всех элементах, где он используется.

1.Создание динамических цветов темы
Выход

Рассмотрим ситуацию, когда вы хотите создать веб-страницу, в которой цвет темы меняется динамически. Вы хотите предоставить пользователям возможность нажать кнопку, а затем увидеть изменение всей цветовой схемы страницы. Давайте посмотрим, как переменные CSS могут сделать это возможным. (Подробнее о переменных CSS)

HTML:

  
Dynamic Theme - CSS Variables
  
Change Theme Color

  

CSS:

:root {
  --primary-color: #3498db;
}

.header {
  background-color: var(--primary-color);
  color: white;
  padding: 20px;
  text-align: center;
}

button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  margin: 20px;
  border-radius: 5px;
}

Javascript:

document.getElementById('changeColorBtn').addEventListener('click', function() {
  // Generate a random hex color
  var randomColor = '#'   Math.floor(Math.random()*16777215).toString(16);

  // Set the random color as the new primary color
  document.documentElement.style.setProperty('--primary-color', randomColor);
});

В этом примере показана веб-страница с кнопкой и заголовком. Цвет фона кнопки и заголовка настраиваются с помощью CSS-переменной –primary-color, значение по умолчанию которой равно #3498db. Сценарий JavaScript создает случайный шестнадцатеричный цветовой код при нажатии кнопки, который затем присваивается как новое значение переменной –primary-color. В результате пользователям предоставляется интересный и интерактивный опыт, поскольку цвет темы кнопки и заголовка динамически меняется.

Заключение
В веб-разработке переменные CSS предлагают универсальный и эффективный метод управления стилями. Определяя повторно используемые значения и применяя их динамически, разработчики могут создавать более удобные в обслуживании и настраиваемые веб-сайты. Переменные CSS предоставляют обширный набор инструментов для улучшения возможностей стиля ваших онлайн-проектов, независимо от того, сосредоточено ли внимание на темах, отзывчивости или анимации. Чтобы в полной мере использовать их в своих проектах, начните интегрировать их в свой рабочий процесс CSS! (Подробнее о переменной CSS)