What are the variables inside :root and the simple ones with $ [duplicate] - css

Question

This question already has an answer here:
Difference between SCSS variables and CSS variables?
(1 answer)
Closed 3 months ago.
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};
}

Answer 1

$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;
}

Answer 2

This is SASS
$primary: #ffcc00;
$secondary: #4b4b4b;
This is pure CSS:
:root{
--data-color-primary: #ffcc00;
--data-color-secondary: #4b4b4b;
}
And this is a mix between the tow:
$primary: #ffcc00;
$secondary: #4b4b4b;
:root{
--data-color-primary: #{$primary};
--data-color-secondary: #{$secondary};
}
If you're already using SASS, you can implement the syntax you want. But if you want to use only pure CSS, then you're not allowed to use the $variables.
On the other hand, you don't need to write --data-color-primary: #{$primary}; in SASS, --data-color-primary: $primary; will do the same work.
If you're wondering which one is faster, well both are the same, because at the end, SASS will be compiled into CSS, which means that for the browser, there's nothing called SASS or compiled CSS, it's just pure css.
Something that could bring a big difference here (I think):
#media will not accept the :root variables as breakpoint for example, which means you can not write something like:
#media screen and (var(--break-point))
{...}
While if you're using SASS, you can use:
#media screen and ($break-point)
{...}