How to call a sass function and update the global variable every time the mixin is called?

Question

Sass

Colleagues, good afternoon.

There is such a code. It makes it possible to generate a css variable when calling the mixin and write the color to the global map. This is done so that you can have access to both the css variable and sass for use in built-in functions.
The output of @debug should be the value of the variable color-primary. But as a result, I get null, and the global map is empty ... I

assume that this is somehow related to the behavior of functions inside mixins and scope, but I could not find specific information about this.

I would be very happy and grateful for your help.

@use 'sass:map';

$globalColors: ();

@mixin defineColor($name, $value, $theme: "default") {
    $themeMap: ();
    
    @if (map.has-key($globalColors, $theme)) {
        $themeMap: map.get($globalColors, $theme);
    }
    
    $globalColors: map.merge(
        $globalColors, 
        map.merge($themeMap, map.set($themeMap, $name, $value)),
    );
    
    --#{$name}: #{$value};
}

:root {
    @include defineColor("color-primary", #0097ab);
}

@debug map.get($globalColors, "color-primary");

Answer 1

From the Sass documentation :

If you need to set a global variable's value from within a local scope (such as in a mixin), you can use the !global flag. A variable declaration flagged as !global will always assign to the global scope.

In general, you will miss !globalafter the assignment.