Generated by SassMeister.com.

input.scss

@use "sass:map";

// Sass map, ideally imported from JSON (e.g. with https://github.com/pmowrer/node-sass-json-importer)
// Based on MUI palette example - https://mui.com/material-ui/customization/color/#picking-colors
$palette: (
    primary: (
      light: '#757ce8',
      main: '#3f50b5',
      dark: '#002884',
      contrastText: '#fff',
    ),
    secondary: (
      light: '#ff7961',
      main: '#f44336',
      dark: '#ba000d',
      contrastText: '#000',
    )
);

@function color-var($name, $variant, $wrap: true) {
    $prop: --#{$name}-#{$variant};

    @if map.has-key($palette, $name, $variant) {
        @return if($wrap, var($prop), $prop);
    }
    
    // @warn "Color '#{$name}' or it's variant '#{$variant}' not found!";
    @return "Color '#{$name}' or it's variant '#{$variant}' not found!";
}

:root {
    @each $name, $variants in $palette {
        @each $variant, $color in $variants {
            #{color-var($name, $variant, false)}: #{$color};
        }
    }
}

body {
    background: color-var(primary, dark);
    color: color-var(primary, contrastText);
    border: color-var(primary, nonExisting);
}

output.css

:root {
  --primary-light: #757ce8;
  --primary-main: #3f50b5;
  --primary-dark: #002884;
  --primary-contrastText: #fff;
  --secondary-light: #ff7961;
  --secondary-main: #f44336;
  --secondary-dark: #ba000d;
  --secondary-contrastText: #000;
}

body {
  background: var(--primary-dark);
  color: var(--primary-contrastText);
  border: "Color 'primary' or it's variant 'nonExisting' not found!";
}

settings.json

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