What is the difference between a variable inside :root and a simple variable

Issue

Can somebody explain to me what's the difference between the variables in :root and the variables above it please?

Why can't we just use one syntax (either with & or --) or just put the $primary and $secondary in :root{...} ?

$primary: #ffcc00;
$secondary: #4b4b4b;

:root{ 
  --data-color-primary: #{$primary};
  --data-color-secondary: #{$secondary};
}

Solution

$primary and $secondary are SCSS variables. They get replaced with their value, #ffcc00 and #4b4b4b after compilation. When they are at the top of the file as in your case, they are accessible anywhere within the file and where it gets imported. If you declare them within :root, they will be scoped, and only visible inside of it.

On the other hand, --data-color-primary and --data-color-secondary are CSS variables (also called custom properties). They can be inherited, so to have them available for each element, we declare them inside :root, which represents html element in the page.

Now, why do you have both of them? Well, there is no reason for that. You can simply do as below, the result you would get anyway after compilation:

:root{ 
  --data-color-primary: #ffcc00;
  --data-color-secondary: #4b4b4b;
}

Answered By - yousoumar