@egor_babintsev
Начинающий front-end разработчик

Как вызвать sass функцию и модифицировать глобальную переменную при каждом вызове миксина?

Коллеги, добрый день.

Имеется вот такой код. Он дает возможность при вызове миксина генерировать css переменную и записывать цвет в глобальный map. Это сделано для того, чтобы можно было иметь доступ как к css переменной, так и к sass, для использования в built-in функциях.
Результатом вывода @debug должно быть значение переменной color-primary. Но в результате я полую null, да и глобальный map пустой...

Предполагаю, что это как-то связано с поведением функций внутри миксинов и области видимости, но найти конкретную информацию по этому поводу не получилось.

Буду очень рад и признателен за помощь

@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");
  • Вопрос задан
  • 82 просмотра
Пригласить эксперта
Ответы на вопрос 1
@Flying
Из документации Sass:

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.


В общем вам не хватет !global после присвоения.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы