Generated by SassMeister.com.

input.scss

@use 'sass:map';
@use 'sass:list';
@use 'sass:selector';

@function to-string($list, $glue: '') {
  $result: nth($list, 1);

  @if length($list) > 1 {
    @for $i from 2 through length($list) {
      $result: $result + $glue + nth($list, $i);
    }
  }

  @return $result;
}

$tokens: (
    'color-red': #ff0000,
    'color-blue': #00ff00,
    'color-green': #0000ff,
    'size-40': 2.5rem,
    'size-48': 3rem,
    'size-56': 3.5rem,
    'shadow-2xs': var(----shadow-2xs)
);

$sizes: (
    40,
    48,
    56
);

$colors: (
    'red',
    'blue',
    'green'
);

$MIXINS: ();

@mixin define-mixin($name) {
    $internal-name: inline-#{unique-id()};
    $MIXINS: map.set($MIXINS, $name, $internal-name) !global;
    
    @at-root {
        %#{$internal-name} {
            @content;
        }
    }
}

@mixin define-mixins($name, $prefix, $prop, $map) {
    @each $item in $map {
        $key: $name + '-' + $item;
        $value: map.get($tokens, $key);
        $var: var(--#{$key}, $value);
        
        @include define-mixin($prefix +  '-' + $item) {
            #{$prop}: $var;
        }
    }
}

@include define-mixins('size', 'p', 'padding', $sizes);
@include define-mixins('size', 'm', 'margin', $sizes);
@include define-mixins('color', 'color', 'color', $colors);
@include define-mixins('color', 'bg', 'background-color', $colors);

@mixin apply-mixin($names...) {
    @each $name in $names {
        $internal-name: map.get($MIXINS, $name);
        @extend %#{$internal-name};
    }
}

.element {
    @include apply-mixin('m-40', 'p-40', 'color-red', 'bg-green');
}

output.css

.element {
  padding: var(--size-40, 2.5rem);
}

.element {
  margin: var(--size-40, 2.5rem);
}

.element {
  color: var(--color-red, #ff0000);
}

.element {
  background-color: var(--color-green, #0000ff);
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}