Testing Sass maps - Generated by SassMeister.com.

input.scss

// Simple sass maps
$alphaValues: 70 50 20;
$hexColors: (
  "primary": #67486b,
  "secondary": #749ee8
);

// Lists are complex multi-level sass maps
$mappedItems: (primary, #67486B, 70 50),
  (secondary, #749EE8, 80 40 20);

/**
 * Generate CSS vars
 */
:root {

  // Simple maps = 👍 this works fine
  @each $alphaValue in $alphaValues {
    --color-alpha: #{$alphaValue * 0.001};
  }
  @each $colorName, $hexColor in $hexColors {
    --color-#{$colorName}: #{$hexColor};
  }
  
  // ToDo: Trying to generate CSS vars for each $alphaValues of each $colorNames.
  @each $colorName, $hexColor, $alphaValue in $mappedItems {
    --color-#{$colorName}-alpha-#($alphaValue): rgba(#{$hexColor}, #{$alphaValue}%);
  }
}

output.css

:root {
  --color-alpha: 0.07;
  --color-alpha: 0.05;
  --color-alpha: 0.02;
  --color-primary: #67486b;
  --color-secondary: #749ee8;
}

settings.json

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