Как использовать переменные в CSS-стилях

В этой статье мы рассмотрим как использовать переменные в CSS-стилях, что позволяет упростить и улучшить работу с кодом.

Введение в CSS-переменные

CSS-переменные, или кастомные свойства, представляют собой способ сохранения значений для повторного использования в вашем коде. Они начинаются с двойного тире -- и могут быть использованы в любом месте, где допустимо использование значения.

Пример использования переменной:

:root {
  --main-color: #ff9800;
}

h1 {
  color: var(--main-color);
}

В этом примере мы определяем переменную --main-color со значением #ff9800 и используем её в стиле для элемента <h1>.

Область видимости переменных

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

Пример с локальной переменной:

div {
  --local-color: #4caf50;
}

div p {
  color: var(--local-color);
}

В этом примере переменная --local-color доступна только для элементов <p>, находящихся внутри элемента <div>.

Значения по умолчанию и каскадирование

CSS-переменные также поддерживают значения по умолчанию и каскадирование, позволяя создавать более гибкие и масштабируемые стили.

Пример с значением по умолчанию:

:root {
  --default-color: #2196f3;
}

h1 {
  color: var(--main-color, var(--default-color));
}

В этом примере, если переменная --main-color не определена, будет использоваться значение переменной --default-color.

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

:root {
  --text-color: #000;
}

body {
  color: var(--text-color);
}

.dark-theme {
  --text-color: #fff;
}

Здесь текст внутри элемента с классом .dark-theme будет белым, а у всех остальных элементов — чёрным.

😉 Теперь вы знаете, как использовать переменные в CSS-стилях и как они могут упростить вашу работу с кодом. Не забывайте экспериментировать и изучать новые возможности CSS!