Generated by SassMeister.com.

input.scss

$red: #ff0000;
$blue: #00ff00;
$green: #00ffff;
$yellow: #ffff00;
$purple: #ff00ff;
$pink: #ff0080;
$orange: #ff8000;
$white: #ffffff;
$black: #000000;

$primary: $pink;

$color-map: (
  primary: (
    100: mix($white, $primary, 10%),
    200: mix($white, $primary, 20%),
    300: mix($white, $primary, 30%),
    400: mix($white, $primary, 40%),
    500: $primary,
    600: mix($black, $primary, 10%),
    700: mix($black, $primary, 20%),
    800: mix($black, $primary, 30%),
    900: mix($black, $primary, 40%)
  ),
  secondary: (
    100: mix($white, $blue, 10%),
    200: mix($white, $blue, 20%),
    300: mix($white, $blue, 30%),
    400: mix($white, $blue, 40%),
    500: $blue,
    600: mix($black, $blue, 10%),
    700: mix($black, $blue, 20%),
    800: mix($black, $blue, 30%),
    900: mix($black, $blue, 40%)
  ),
  tertiary: (
    100: mix($white, $green, 10%),
    200: mix($white, $green, 20%),
    300: mix($white, $green, 30%),
    400: mix($white, $green, 40%),
    500: $green,
    600: mix($black, $green, 10%),
    700: mix($black, $green, 20%),
    800: mix($black, $green, 30%),
    900: mix($black, $green, 40%)
  ),
  quaternary: (
    100: mix($white, $yellow, 10%),
    200: mix($white, $yellow, 20%),
    300: mix($white, $yellow, 30%),
    400: mix($white, $yellow, 40%),
    500: $yellow,
    600: mix($black, $yellow, 10%),
    700: mix($black, $yellow, 20%),
    800: mix($black, $yellow, 30%),
    900: mix($black, $yellow, 40%)
  ),
  quinary: (
    100: mix($white, $purple, 10%),
    200: mix($white, $purple, 20%),
    300: mix($white, $purple, 30%),
    400: mix($white, $purple, 40%),
    500: $purple,
    600: mix($black, $purple, 10%),
    700: mix($black, $purple, 20%),
    800: mix($black, $purple, 30%),
    900: mix($black, $purple, 40%)
  )
);



:root {
  @each $color, $shades in $color-map {
    @each $shade, $value in $shades {
      --#{$color}-#{$shade}: #{$value};
    }
  }
}

@each $color, $shades in $color-map {
  @each $shade, $value in $shades {
    .text-#{$color}--#{$shade} {
      color: #{$value};
    }
  }
}


@each $color, $shades in $color-map {
  @each $shade, $value in $shades {
    .baackground-#{$color}--#{$shade} {
      color: #{$value};
    }
  }
}

@each $color, $shades in $color-map {
  @each $shade, $value in $shades {
    .border-#{$color}--#{$shade} {
      color: #{$value};
    }
  }
}



.thing {
    color: red;
}

output.css

:root {
  --primary-100: #ff1a8d;
  --primary-200: #ff3399;
  --primary-300: #ff4da6;
  --primary-400: #ff66b3;
  --primary-500: #ff0080;
  --primary-600: #e60073;
  --primary-700: #cc0066;
  --primary-800: #b3005a;
  --primary-900: #99004d;
  --secondary-100: #1aff1a;
  --secondary-200: #33ff33;
  --secondary-300: #4dff4d;
  --secondary-400: #66ff66;
  --secondary-500: #00ff00;
  --secondary-600: #00e600;
  --secondary-700: #00cc00;
  --secondary-800: #00b300;
  --secondary-900: #009900;
  --tertiary-100: #1affff;
  --tertiary-200: #33ffff;
  --tertiary-300: #4dffff;
  --tertiary-400: #66ffff;
  --tertiary-500: #00ffff;
  --tertiary-600: #00e6e6;
  --tertiary-700: #00cccc;
  --tertiary-800: #00b3b3;
  --tertiary-900: #009999;
  --quaternary-100: #ffff1a;
  --quaternary-200: #ffff33;
  --quaternary-300: #ffff4d;
  --quaternary-400: #ffff66;
  --quaternary-500: #ffff00;
  --quaternary-600: #e6e600;
  --quaternary-700: #cccc00;
  --quaternary-800: #b3b300;
  --quaternary-900: #999900;
  --quinary-100: #ff1aff;
  --quinary-200: #ff33ff;
  --quinary-300: #ff4dff;
  --quinary-400: #ff66ff;
  --quinary-500: #ff00ff;
  --quinary-600: #e600e6;
  --quinary-700: #cc00cc;
  --quinary-800: #b300b3;
  --quinary-900: #990099;
}

.text-primary--100 {
  color: #ff1a8d;
}

.text-primary--200 {
  color: #ff3399;
}

.text-primary--300 {
  color: #ff4da6;
}

.text-primary--400 {
  color: #ff66b3;
}

.text-primary--500 {
  color: #ff0080;
}

.text-primary--600 {
  color: #e60073;
}

.text-primary--700 {
  color: #cc0066;
}

.text-primary--800 {
  color: #b3005a;
}

.text-primary--900 {
  color: #99004d;
}

.text-secondary--100 {
  color: #1aff1a;
}

.text-secondary--200 {
  color: #33ff33;
}

.text-secondary--300 {
  color: #4dff4d;
}

.text-secondary--400 {
  color: #66ff66;
}

.text-secondary--500 {
  color: #00ff00;
}

.text-secondary--600 {
  color: #00e600;
}

.text-secondary--700 {
  color: #00cc00;
}

.text-secondary--800 {
  color: #00b300;
}

.text-secondary--900 {
  color: #009900;
}

.text-tertiary--100 {
  color: #1affff;
}

.text-tertiary--200 {
  color: #33ffff;
}

.text-tertiary--300 {
  color: #4dffff;
}

.text-tertiary--400 {
  color: #66ffff;
}

.text-tertiary--500 {
  color: #00ffff;
}

.text-tertiary--600 {
  color: #00e6e6;
}

.text-tertiary--700 {
  color: #00cccc;
}

.text-tertiary--800 {
  color: #00b3b3;
}

.text-tertiary--900 {
  color: #009999;
}

.text-quaternary--100 {
  color: #ffff1a;
}

.text-quaternary--200 {
  color: #ffff33;
}

.text-quaternary--300 {
  color: #ffff4d;
}

.text-quaternary--400 {
  color: #ffff66;
}

.text-quaternary--500 {
  color: #ffff00;
}

.text-quaternary--600 {
  color: #e6e600;
}

.text-quaternary--700 {
  color: #cccc00;
}

.text-quaternary--800 {
  color: #b3b300;
}

.text-quaternary--900 {
  color: #999900;
}

.text-quinary--100 {
  color: #ff1aff;
}

.text-quinary--200 {
  color: #ff33ff;
}

.text-quinary--300 {
  color: #ff4dff;
}

.text-quinary--400 {
  color: #ff66ff;
}

.text-quinary--500 {
  color: #ff00ff;
}

.text-quinary--600 {
  color: #e600e6;
}

.text-quinary--700 {
  color: #cc00cc;
}

.text-quinary--800 {
  color: #b300b3;
}

.text-quinary--900 {
  color: #990099;
}

.baackground-primary--100 {
  color: #ff1a8d;
}

.baackground-primary--200 {
  color: #ff3399;
}

.baackground-primary--300 {
  color: #ff4da6;
}

.baackground-primary--400 {
  color: #ff66b3;
}

.baackground-primary--500 {
  color: #ff0080;
}

.baackground-primary--600 {
  color: #e60073;
}

.baackground-primary--700 {
  color: #cc0066;
}

.baackground-primary--800 {
  color: #b3005a;
}

.baackground-primary--900 {
  color: #99004d;
}

.baackground-secondary--100 {
  color: #1aff1a;
}

.baackground-secondary--200 {
  color: #33ff33;
}

.baackground-secondary--300 {
  color: #4dff4d;
}

.baackground-secondary--400 {
  color: #66ff66;
}

.baackground-secondary--500 {
  color: #00ff00;
}

.baackground-secondary--600 {
  color: #00e600;
}

.baackground-secondary--700 {
  color: #00cc00;
}

.baackground-secondary--800 {
  color: #00b300;
}

.baackground-secondary--900 {
  color: #009900;
}

.baackground-tertiary--100 {
  color: #1affff;
}

.baackground-tertiary--200 {
  color: #33ffff;
}

.baackground-tertiary--300 {
  color: #4dffff;
}

.baackground-tertiary--400 {
  color: #66ffff;
}

.baackground-tertiary--500 {
  color: #00ffff;
}

.baackground-tertiary--600 {
  color: #00e6e6;
}

.baackground-tertiary--700 {
  color: #00cccc;
}

.baackground-tertiary--800 {
  color: #00b3b3;
}

.baackground-tertiary--900 {
  color: #009999;
}

.baackground-quaternary--100 {
  color: #ffff1a;
}

.baackground-quaternary--200 {
  color: #ffff33;
}

.baackground-quaternary--300 {
  color: #ffff4d;
}

.baackground-quaternary--400 {
  color: #ffff66;
}

.baackground-quaternary--500 {
  color: #ffff00;
}

.baackground-quaternary--600 {
  color: #e6e600;
}

.baackground-quaternary--700 {
  color: #cccc00;
}

.baackground-quaternary--800 {
  color: #b3b300;
}

.baackground-quaternary--900 {
  color: #999900;
}

.baackground-quinary--100 {
  color: #ff1aff;
}

.baackground-quinary--200 {
  color: #ff33ff;
}

.baackground-quinary--300 {
  color: #ff4dff;
}

.baackground-quinary--400 {
  color: #ff66ff;
}

.baackground-quinary--500 {
  color: #ff00ff;
}

.baackground-quinary--600 {
  color: #e600e6;
}

.baackground-quinary--700 {
  color: #cc00cc;
}

.baackground-quinary--800 {
  color: #b300b3;
}

.baackground-quinary--900 {
  color: #990099;
}

.border-primary--100 {
  color: #ff1a8d;
}

.border-primary--200 {
  color: #ff3399;
}

.border-primary--300 {
  color: #ff4da6;
}

.border-primary--400 {
  color: #ff66b3;
}

.border-primary--500 {
  color: #ff0080;
}

.border-primary--600 {
  color: #e60073;
}

.border-primary--700 {
  color: #cc0066;
}

.border-primary--800 {
  color: #b3005a;
}

.border-primary--900 {
  color: #99004d;
}

.border-secondary--100 {
  color: #1aff1a;
}

.border-secondary--200 {
  color: #33ff33;
}

.border-secondary--300 {
  color: #4dff4d;
}

.border-secondary--400 {
  color: #66ff66;
}

.border-secondary--500 {
  color: #00ff00;
}

.border-secondary--600 {
  color: #00e600;
}

.border-secondary--700 {
  color: #00cc00;
}

.border-secondary--800 {
  color: #00b300;
}

.border-secondary--900 {
  color: #009900;
}

.border-tertiary--100 {
  color: #1affff;
}

.border-tertiary--200 {
  color: #33ffff;
}

.border-tertiary--300 {
  color: #4dffff;
}

.border-tertiary--400 {
  color: #66ffff;
}

.border-tertiary--500 {
  color: #00ffff;
}

.border-tertiary--600 {
  color: #00e6e6;
}

.border-tertiary--700 {
  color: #00cccc;
}

.border-tertiary--800 {
  color: #00b3b3;
}

.border-tertiary--900 {
  color: #009999;
}

.border-quaternary--100 {
  color: #ffff1a;
}

.border-quaternary--200 {
  color: #ffff33;
}

.border-quaternary--300 {
  color: #ffff4d;
}

.border-quaternary--400 {
  color: #ffff66;
}

.border-quaternary--500 {
  color: #ffff00;
}

.border-quaternary--600 {
  color: #e6e600;
}

.border-quaternary--700 {
  color: #cccc00;
}

.border-quaternary--800 {
  color: #b3b300;
}

.border-quaternary--900 {
  color: #999900;
}

.border-quinary--100 {
  color: #ff1aff;
}

.border-quinary--200 {
  color: #ff33ff;
}

.border-quinary--300 {
  color: #ff4dff;
}

.border-quinary--400 {
  color: #ff66ff;
}

.border-quinary--500 {
  color: #ff00ff;
}

.border-quinary--600 {
  color: #e600e6;
}

.border-quinary--700 {
  color: #cc00cc;
}

.border-quinary--800 {
  color: #b300b3;
}

.border-quinary--900 {
  color: #990099;
}

.thing {
  color: red;
}

settings.json

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