CSS3 Переопределение переменных

Переопределение глобальных переменных локальными переменными

Из предыдущей страницы мы узнали, что глобальные переменные могут быть доступны/использованы через весь документ, в то время как локальные переменные могут использоваться только внутри селектора, где он объявлен.

Посмотрите на пример с предыдущей страницы:

:root {
--blue: #1e90ff;
--white: #ffffff;
}

body {
background-color: var(--blue);
}

h2 {
border-bottom: 2px solid var(--blue);
}

.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}

button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}

Попробуйте сами »

Иногда мы хотим, чтобы переменные менялись только в определенном разделе страницы.

Предположим, нам нужен другой синий цвет для элементов кнопок. Затем мы можем повторно объявить переменную --blue внутри селектора кнопок. Когда мы используем var(--blue) внутри этого селектора, он будет использовать локальное значение переменной --blue, объявленное здесь.

Мы видим, что локальная переменная --blue переопределит глобальную переменную --blue для элементов кнопки:

:root {
--blue: #1e90ff;
--white: #ffffff;
}

body {
background-color: var(--blue);
}

h2 {
border-bottom: 2px solid var(--blue);
}

.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}

button {
--blue: #0000ff;
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}

Попробуйте сами »

Добавить новую локальную переменную

Если переменная должна использоваться только в одном месте, мы также могли бы объявить новую локальную переменную, например:

:root {
--blue: #1e90ff;
--white: #ffffff;
}

body {
background-color: var(--blue);
}

h2 {
border-bottom: 2px solid var(--blue);
}

.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}

button {
--button-blue: #0000ff;
background-color: var(--white);
color: var(--button-blue);
border: 1px solid var(--button-blue);
padding: 5px;
}

Попробуйте сами »