CSS 变量的作用域是什么？
变量作用域，变量的可用性范围。变量并不总是有效可用的，而限定变量的可用性范围就是变量的作用域。而 CSS 变量在 CSS 层次结构中声明的位置，决定了它在整个层次结构中的可用性范围。
通常来说，CSS 变量仅对声明它的元素的子元素可见。比如下面的例子中，--bgColor变量对 child 元素可见：
<div > parent <div >child</div> </div>
.parent {
--bgColor: pink;
}
.child {
background: var(--bgColor);
}
我们创建了 2 个作用域范围，分别是代表明亮主题的.theme-bright和暗黑主题的.theme-dark。在这两个局部作用域中使用相同的变量名，各个变量只对主题相应的模块生效。
总结
利用CSS 变量的作用域特性和var()的变量回退，有助于我们设计一个代码整洁、模块化的系统。但也要注意作用域层级和合理运用 CSS 变量赋值，避免代码结构过于复杂以及影响页面渲染性能。
相关文章推荐：