Generated by SassMeister.com.

input.scss

@mixin theme($tokens) {
    & {
        @each $token, $value in $tokens {
            --#{$token}: #{$value};
        }
    }
}

$theme: (
  white: #ffffff,
  black: #000000,
);

@function theme($token) {
    @if map-has-key($theme, $token) == false {
        @error 'Unable to find token #{$token} in theme';
    }
    @return map-get($theme, $token);
}

@function t($token) {
    @return var(--#{$token}, theme($token));
}

.theme {
    @include theme($theme);
}

.title {
    color: t(white);
    color: var(--white, theme(white));
}

output.css

.theme {
  --white: #ffffff;
  --black: #000000;
}

.title {
  color: var(--white, #ffffff);
  color: var(--white, #ffffff);
}

settings.json

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