@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};
        }
    }
}

// mt0,mr0,mb0,ml0 --> mt100,mr100,mb100,ml100
@for $i from 0 through 100 {
    .mt#{$i} {
        margin-top: #{$i}px !important;
    }

    .mr#{$i} {
        margin-right: #{$i}px !important;
    }

    .mb#{$i} {
        margin-bottom: #{$i}px !important;
    }

    .ml#{$i} {
        margin-left: #{$i}px !important;
    }

    .pt#{$i} {
        padding-top: #{$i}px !important;
    }

    .pr#{$i} {
        padding-right: #{$i}px !important;
    }

    .pb#{$i} {
        padding-bottom: #{$i}px !important;
    }

    .pl#{$i} {
        padding-left: #{$i}px !important;
    }
}