Generated by SassMeister.com.

input.scss

@use 'sass:map';

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

@each $size in $sizes {
    $value: map.get($tokens, 'size-' + $size);
    $var: var(--color-#{$size}, $value);
    
    @include define-mixin('p-' + $size) {
        padding: $var;
    }
    
    @include define-mixin('m-' + $size) {
        margin: $var $var $var $var;
    }
}

@each $color in $colors {
    $value: map.get($tokens, 'color-' + $color);
    $var: var(--color-#{$color}, $value);
    
    @include define-mixin('color-' + $color) {
        color: $var;
    }
    
    @include define-mixin('bg-' + $color) {
        background-color: $var;
    }
}

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

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

output.css

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

.element {
  margin: var(--color-40, 2.5rem) var(--color-40, 2.5rem) var(--color-40, 2.5rem) var(--color-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
}