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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.