How to store hue from primary color pallete in global variables in angular material?

Question

I am extracting 500 hue from primary pallete and I want to store that hue in global scss variable so that I can use it anywhere. But it is not working. My code:

:root{
--color-primary:  mat.get-color-from-palette($primary-palette, 500);
}

In other scss file of component I want to use it like:

.our-class {
background-color: var(--color-primary);
}