Переопределение глобальной переменной локальной
Глобальные переменные можно использовать в любом месте документа, тогда как локальные переменные можно использовать только внутри селектора, в котором они объявлены.
Иногда вам нужно, чтобы переменная менялась только в определённой части страницы.
Для этого можно повторно объявить переменную внутри более специфичного селектора. Когда вы используете var() внутри этого селектора, будет использовано локальное значение вместо глобального. Локальная переменная переопределяет глобальную переменную для этого селектора.
Пример
Здесь селектор .note повторно объявляет --primary-bg-color как красный. Внутри .note используется локальное значение вместо глобального синего.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Override Global Variable With Local Variable</title>
<style>
:root {
--primary-bg-color: #1e90ff;
--primary-color: #ffffff;
}
body {
background-color: var(--primary-bg-color);
}
.container {
color: var(--primary-bg-color);
background-color: var(--primary-color);
padding: 15px;
}
.container h2 {
border-bottom: 2px solid var(--primary-bg-color);
}
.container .note {
--primary-bg-color: red; /* local variable will override global */
border: 1px solid var(--primary-bg-color);
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<h2>Welcome</h2>
<p>This is a container with global variable colors.</p>
<div class="note">
<p>This note has a red border because the local --primary-bg-color overrides the global value.</p>
</div>
</div>
</body>
</html>
Добавление новой локальной переменной
Если переменная будет использоваться только в одном месте, можно объявить совершенно новую локальную переменную вместо переопределения глобальной.
Пример
Здесь новая локальная переменная --note-border-color объявлена внутри .note и используется только для рамки этого элемента.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add a New Local Variable</title>
<style>
:root {
--primary-bg-color: #1e90ff;
--primary-color: #ffffff;
}
body {
background-color: var(--primary-bg-color);
}
.container {
color: var(--primary-bg-color);
background-color: var(--primary-color);
padding: 15px;
}
.container h2 {
border-bottom: 2px solid var(--primary-bg-color);
}
.container .note {
--note-border-color: red; /* new local variable */
border: 1px solid var(--note-border-color);
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<h2>Welcome</h2>
<p>This is a container with global variable colors.</p>
<div class="note">
<p>This note has a red border using a new local variable --note-border-color.</p>
</div>
</div>
</body>
</html>