CSS Variables Scope

Lecture 108:- CSS Variables Scope

CSS variables, also known as custom properties, have a specific scope where they can be accessed and used. There are two types of scopes: local and global.

1. Local scope: CSS variables defined inside a selector have a local scope and can only be used within that selector and its descendants. For example:

cssCopy code

div {  --main-color: blue; }

In this example, --main-color is defined inside the div selector, so it can only be used within that selector and any descendant selectors.

1. Global scope: CSS variables defined outside of any selector have a global scope and can be used anywhere in the stylesheet. For example:

cssCopy code

:root {  --main-color: blue; }

In this example, --main-color is defined outside of any selector, so it can be used anywhere in the stylesheet.

It's important to note that when a CSS variable is used, the browser looks for the variable in the local scope first. If it's not found, the browser will then look for the variable in the global scope.

cssCopy code

div {  --main-color: blue; } p {  color: var(--main-color); }

In this example, --main-color is defined in the local scope of the div selector, but it's used in the p selector. Because --main-color is not defined in the local scope of the p selector, the browser will look for it in the global scope and use the value of blue.

Understanding the scope of CSS variables is important for creating modular and maintainable code, and for avoiding naming conflicts between variables used in different parts of the stylesheet.