update sass user defined color variables - css

Question

I have created an angular component MyComponent that has a sass and the theme file.
mycomponent.component.scss
#import "../styles/common";
#import 'mycomponent.theme';
.element {
color:$primary
}
in the common.scss, I have imported other files likes variables.scss that contain $primary with predefined or default colour and other theme variables.
and in the mycomponent.theme.scss, I defined the #mixin to update the primary variable
#mixin mycomponent-theme() {
$primary: green ;
}
Now the theme file that creates the final theme.css call this #mixin
#include mycomponent-theme();
but the element class's color is not getting updated to the green color as mixin is updating the $primary variable.
Am I making any mistake? Or what is the other way to achieve this?
Update
Here is the codepen https://codepen.io/ermarkar/pen/wygwYp?page=1&

Answer 1

Your issue has to do with scoping.
The $primary variable that you set to the value green in the mixin mycomponent-theme() is a local variable, therefore, it is only visible to the code that is inside that mixin.
Even though it has the same name as another global variable (I assume it is global), they are different variables.
When you wrote:
.element {
color:$primary
}
Sass used the global variable called $primary, whose value your mixin did not change, the mixin created a local variable with the same name.
There is a very good resource that I recommend you to read that helps understand variable scoping in Sass, much better than I can explain here.
UPDATE:
One thing you could do that I just thought of, is use !global. This keyword lets you manipulate variables in the global scope from within function or mixin blocks.
In your case, if you change your mixin to this:
#mixin mycomponent-theme() {
$primary: green !global;
}
Then the mycomponent-theme() mixin will change the global $primary variable.