In Part 1, We have started with a Quick Start Guide which explains – What CSS Variables are and Why we should care about them.

We are now going to look into another important asset that you should really care about while using CSS Variables and it is Scope.

What is Scope in CSS Variables?

Scope determines the range of the accessibility of the variable. Scope helps to store separate values, which comes into play only when they are necessary.

Type of Scopes –

CSS Variables follows the “Lexical or Static Scope Conventions”. CSS Variables have two types of scopes “Global Scope” and “Local Scope”.

Let’s look into both of them –

Global Scope

A Variable which is declared in the the global scope can be accessed anywhere in the CSS. A variable in global scope is declared or defined inside the :root selector’s block. An explanatory code is shown below –

/*Defining a Variable in Global Scope*/
:root{
  --primary-color: #3A6FE2;
  --accent-color: #FFFFFF;
}

/*Accessing a Variable defined in the Global Scope*/
.wrapper{
  background: var(--primary-color);
  background: var(--accent-color);
}

Local Scope

The Variables which are declared within the code block of a particular selector are scoped locally in respect to the selector. An explanatory code is shown below –

/*Defining and Accessing a Variable in Local Scope*/
.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);
}

In local scope, Variables can be declared and accessed with the same names in different CSS blocks. As the Variable declared in one local scope cannot be accessed from any other CSS code block.

A Local Scope always have an access to the variables which are declared in outer or global scope.

CSS Variables can be “accessed first and declared later” while writing css code, which makes the CSS Variable Scoping even more powerful and usable.

Hoisting in CSS Variables

CSS Variables are hoisted and they are moved on the top of the CSSOM before rendering the styles of respective HTML elements in the browser.

/*Accessing a Variable First and Declaring Later*/
body{
  background: var(--bg-fill);
}
:root{
  --bg-fill: green;
}

The code above just works perfectly, and that is how hoisting works within CSS.

An Example

We can use CSS Variable Scope as an advantage in different case scenarios, You can just see an example below which demonstrates a basic theme toggle switcher.

See the Pen CSS Variables #2 by Nitish Khagwal (@nitishkmrk) on CodePen.

We have just created two scopes, first one is for the bright theme which is .theme-bright and the second one for a dark theme which is .theme-dark. We have used the same variable names in both the locally scoped blocks.

We have accessed the variables reference values in respective class blocks. A bit of JavaScript is used to toggle the classes on the parent wrapper which lets the variables to access the values from the respective scopes.

Possibly now you can figure out how easy and powerful it is to use CSS Variable Scope as a perk.

Stay tuned for the next publishing in the series.