Generated by SassMeister.com.

input.scss

@use 'sass:meta';
@use 'sass:map';
@use 'sass:string';

$color-palette: (
    rose: (
        '050': #fcf5f6,
        '100': #f8e3e6,
        '200': #f1c7cd,
        '300': #eaa7b0,
        '400': #e1828f,
        '500': #d65667,
        '600': #b93345,
        '700': #822430,
        '800': #47141a,
        '900': #260a0e,
    ),
    cheese: #ffcc33,
);

/**
 * Retrieve colours from nested map
 *
 * - Pass a colour name with it's optional shade value
 * - If no shade value is passed, returns a default (500)
 * - Supports single colour names
 * ! Nested map doesn't give the fallback value
 * 
 * @author Aaron Gregg <[email protected]>
 */
@function clr($color, $shade: '500') {
    // Check if the color is another nested map
    @if map == type-of(map.get($color-palette, $color)) {
        // If someone passes a number (doesn't quote the string)
        // then convert it to a string for the map.get
        @if number == type-of($shade) {
            // $value: map.get($color-palette, $color, meta.inspect($shade));
            $value: map.get($color-palette, $color, $shade);
            @return unquote('var(--c-' + $color + '-' + $shade + ', ' + #{$value} + ')');
        } @else {
            $value: map.get($color-palette, $color, $shade);
            @return unquote('var(--c-' + $color + '-' + $shade + ', ' + #{$value} + ')');
        }
    } @else {
        $value: map.get($color-palette, $color);
        @return unquote('var(--c-' + $color + ', ' + $value + ')');
    }
}

.rose {
    color: clr(rose);
}

.rose-500 {
    color: clr(rose, 500);
}

.rose-600 {
    color: clr(rose, '600');
}

.cheese {
    color: clr(cheese);
}

// .rose {
//   color: #d65667;
// }

// .rose-500 {
//   color: #d65667;
// }

// .rose-600 {
//   color: #b93345;
// }

// .cheese {
//   color: #ffcc33;
// }

@each $color-name in $color-palette {
    @each $color-shade, $color-value in map-get($color-palette, 'padding') {
        .#{'color-shade'} {
            $color-shade: 100;
        }
    }
};

output.css

/**
 * Retrieve colours from nested map
 *
 * - Pass a colour name with it's optional shade value
 * - If no shade value is passed, returns a default (500)
 * - Supports single colour names
 * ! Nested map doesn't give the fallback value
 * 
 * @author Aaron Gregg <[email protected]>
 */
.rose {
  color: var(--c-rose-500, #d65667);
}

.rose-500 {
  color: var(--c-rose-500, );
}

.rose-600 {
  color: var(--c-rose-600, #b93345);
}

.cheese {
  color: var(--c-cheese, #ffcc33);
}

settings.json

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