10.1 Объявление переменных
Переменные в CSS, также известные как пользовательские свойства (CSS Custom Properties), позволяют разработчикам сохранять значения свойств в одно место и повторно использовать их в документе. Это делает CSS более гибким и управляемым, особенно при работе с крупными проектами.
Объявление переменных
Переменные в CSS объявляются с использованием двух дефисов (--) перед именем переменной. Обычно они объявляются внутри селектора :root, чтобы сделать их доступными во всем документе.
Синтаксис:
:root {
--имя-переменной: значение;
--имя-переменной: значение;
}
Пример:
В этом примере объявлены три переменные: --main-color, --secondary-color, и --font-size.
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
10.2 Использование переменных
Для использования переменных применяется функция var(), которая принимает имя переменной в качестве аргумента.
Синтаксис:
селектор {
свойство: var(--имя-переменной);
свойство: var(--имя-переменной);
}
Пример:
Этот пример использует ранее объявленные переменные для стилизации фона, цвета текста и размера шрифта элемента <body>.
body {
background-color: var(--main-color);
color: var(--secondary-color);
font-size: var(--font-size);
}
10.3 Наследование и переопределение переменных
Переменные CSS наследуются по иерархии элементов. Это означает, что если переменная объявлена в одном элементе, она будет доступна и для его дочерних элементов. Переменные также можно переопределять внутри других селекторов.
Пример:
В этом примере элемент .header переопределяет переменную --main-color, и эта новая переменная применяется только к нему. В то же время, элемент .footer использует значение переменной, объявленное в :root.
<div class="header">Header</div>
<div class="footer">Footer</div>
:root {
--main-color: #3498db;
}
.header {
--main-color: #e74c3c;
background-color: var(--main-color);
}
.footer {
background-color: var(--main-color);
}
10.4 Преимущества использования CSS-переменных
1. Упрощение управления стилями:
Переменные позволяют изменять значение одного свойства в одном месте, и это изменение автоматически применится ко всем местам, где используется эта переменная. Это особенно полезно для темизации и поддержания согласованного стиля.
2. Улучшение читаемости и поддержки кода:
Использование переменных делает CSS-код более читаемым и понятным, так как они могут быть использованы для описания значений, таких как цвета и размеры, которые могут иметь семантическое значение (например, --main-color вместо #3498db).
3. Динамическое обновление стилей:
Переменные могут быть изменены динамически с помощью JavaScript, что позволяет создавать более интерактивные и динамические пользовательские интерфейсы.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ