Generated by SassMeister.com.

input.scss

// TODO: define your theme overrides here, and that's all!
$theme-overrides: (
    --theme-primary-1: #252b6e,
    --theme-primary-2: #3c46b1,
    --theme-primary-3: #434fc9,
    --theme-primary-4: #515ff0,
    --theme-primary-5: #6c78f2,
    --theme-primary-6: #7e88f3,
    --theme-primary-7: #b0b6f8,
    --theme-primary-8: #f2f3fe,
);

@mixin theme-css-vars($vars) {
    @each $name, $color in $vars {
        #{$name}: $color;
    }
}

@mixin theme-rgb-css-vars($vars) {
    @each $name, $color in $vars {
        #{str-insert($name, "-rgb", 8)}: to-rgb($color);
    }
}

@function to-rgb($color) {
  @return red($color), green($color), blue($color);
}

:root {
    @include theme-css-vars($theme-overrides);
    
    // Same but used in rgba contexts
    @include theme-rgb-css-vars($theme-overrides);
}

output.css

:root {
  --theme-primary-1: #252b6e;
  --theme-primary-2: #3c46b1;
  --theme-primary-3: #434fc9;
  --theme-primary-4: #515ff0;
  --theme-primary-5: #6c78f2;
  --theme-primary-6: #7e88f3;
  --theme-primary-7: #b0b6f8;
  --theme-primary-8: #f2f3fe;
  --theme-rgb-primary-1: 37, 43, 110;
  --theme-rgb-primary-2: 60, 70, 177;
  --theme-rgb-primary-3: 67, 79, 201;
  --theme-rgb-primary-4: 81, 95, 240;
  --theme-rgb-primary-5: 108, 120, 242;
  --theme-rgb-primary-6: 126, 136, 243;
  --theme-rgb-primary-7: 176, 182, 248;
  --theme-rgb-primary-8: 242, 243, 254;
}

settings.json

{
  "sass": {
    "compiler": "libsass/3.5.5",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}