@mixin set-css-var-value($name, $value) {
    #{joinVarName($name)}: #{$value};
}

@function joinVarName($list) {
    $name: '--ba';
    @each $item in $list {
        @if $item != '' {
            $name: $name + '-' + $item;
        }
    }
    @return $name;
}

@function getCssVarName($args...) {
    @return joinVarName($args);
}

/*
 * 通过映射设置所有的CSS变量
 */
@mixin set-component-css-var($name, $variables) {
    @each $attribute, $value in $variables {
        @if $attribute == 'default' {
            #{getCssVarName($name)}: #{$value};
        } @else {
            #{getCssVarName($name, $attribute)}: #{$value};
        }
    }
}