В этой статье мы рассмотрим как использовать переменные в 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!
Добавить комментарий