Accessing derived variable - possible?

[OrenLX]

Let's say I have a variable:
$primary: color(indigo);

The color(..) is a function which returns hex value from the color palette I've defined somewhere else:
indigo: ( lighter: #f4f5fa, light: #b3bcf5, base: #5c6ac4, dark: #202e78, darker: #000639, text: #3e4155, ),

when I try to use it inside vue component, in a way like
color: $primary

But when I inspect it on my browser it's not getting me the hex value I mapped - which should be #5c6ac4, instead I get literally the function, like: color: color(indigo).

Is that possible the resource loader would pre-compile the variable before passing it down to the vue components?

Thank you!