В первой части краткого руководства, мы начали изучать CSS-переменные. Разобрались, что это такое и почему мы должны их использовать. Сейчас мы рассмотрим другой важный момент, который вы не должны упускать из вида в процессе работы – область видимости CSS-переменных.
Что такое область видимости в переменных CSS?
Область видимости определяет диапазон доступности переменной. Она позволяет сохранять отдельные значения, которые вступают в игру только тогда, когда они необходимы.
Типы областей видимости
Область видимости у переменных CSS бывает двух типов: глобальная и локальная, что соответствует лексическим и статическим рамкам. Давайте рассмотрим оба варианта.
Глобальная область видимости
Переменная, объявленная в глобальной области видимости доступна в любом месте CSS-кода. Такая переменная объявляется в блоке-селекторе :root. Пример кода глобальной области видимости переменной:
CSS
/*Объявляем переменную в глобальной области видимости */
:root{
--primary-color: #3A6FE2;
--accent-color: #FFFFFF;
}
/*Обращаемся к переменной, объявленной в глобальной области видимости*/
.wrapper{
background: var(--primary-color);
background: var(--accent-color);
}
Локальная область видимости.
CSS
/*Объявляем локальную переменную и обращаемся к ней*/
.visibility-high{
--font-size: 24px;
--leading: 1.8;
font-size: var(--font-size);
line-height: var(--leading);
}
.visibility-low{
--font-size: 18px;
--leading: 1.6;
font-size: var(--font-size);
line-height: var(--leading);
}
В локальной области видимости переменные с одинаковыми именами могут быть объявлены в разных блоках CSS-кода. Таким образом, переменная, объявленная в одном блоке CSS-кода, недоступна в другом. В локальной области видимости можно обращаться к переменным, объявленным в глобальной области видимости
Благодаря области видимости при написании кода к CSS-переменным можно «сначала обратиться, а потом объявить» - это делает область видимости очень мощным и удобным средством.
«Подъем» CSS-переменных.
CSS-переменные имеют возможность подниматься - двигаться вверх по CSSOM (CSS Object Model) в процессе рендеринга стилей соответствующего HTML-элемента в браузере.
CSS
/*сначала обращаемся к переменной, а потом объявляем ее */
body{
background: var(--bg-fill);
}
:root{
--bg-fill: green;
}
Приведенный выше код отлично отрабатывает благодаря механизму «подъема».
Пример
Мы можем использовать область видимости переменных CSS при реализации различных вариантов внешнего вида элементов на странице. Вы можете увидеть, как это работает на примере «переключателя» цветовой темы оформления страницы.
HTML
<div class="wrapper theme-bright">
<span class="switch">Dark</span>
<header>
<h1>Header</h1>
</header>
<article>
<p>Tumeric you probably haven't heard of them franzen tattooed. Normcore authentic try-hard, fingerstache typewriter tilde unicorn four dollar toast you probably haven't heard of them pinterest.
</p>
</article>
<footer>
<h1>Footer</h1>
</footer>
</div>
CSS
* {
box-sizing: border-box;
}
body {
font-family: system-ui, sans-serif;
margin: 0;
}
.theme-bright {
--bg-fill: #ffeaea;
--text-color: #060130;
}
.theme-dark {
--bg-fill: #060130;
--text-color: #ffeaea;
}
header,
footer {
background: var(--bg-fill);
color: var(--text-color);
transition: 0.5s;
}
p {
width: 800px;
margin: 40px auto;
padding: 15px;
max-width: 80%;
line-height: 1.6;
font-size: 15px;
background: var(--bg-fill);
color: var(--text-color);
transition: 0.5s;
}
h1 {
text-align: center;
margin: 0;
padding: 10px;
}
span.switch {
background: var(--text-color);
padding: 5px 15px 6px 15px;
position: fixed;
right: 13px;
top: 13px;
color: var(--bg-fill);
cursor: pointer;
border-radius: 3px;
opacity: 1;
}
span.switch:hover{
opacity: .90;
}
JavaScript
let view = document.querySelector(".wrapper");
let controller = document.querySelector(".switch");
controller.addEventListener("click", () => {
if (view.classList.contains("theme-bright")) {
view.classList.remove("theme-bright");
view.classList.add("theme-dark");
controller.innerHTML = "Bright";
} else {
view.classList.remove("theme-dark");
view.classList.add("theme-bright");
controller.innerHTML = "Dark";
}
});
Мы создали 2 области видимости: одну для яркой цветовой темы (в CSS-классе .theme-bright), вторую для темной цветовой темы (в CSS-классе .theme-dark). Мы использовали переменные с одинаковыми именами, объявленные в локальных областях видимости. Мы получили различные значения переменных в соответствующих CSS-классах. Немного JS-кода для реализации переключения имен CSS-классов родительского элемента, что позволяет переменным получать доступ к значениям из соответствующих областей.
Возможно, теперь вы можете ощутить все преимущества использования областей видимости CSS переменных.
Продолжение следует…
Оригинал статьи: https://webkul.com/blog/understanding-the-scope-in-css-variables/
Перевод: Земсков Матвей
