Generated by SassMeister.com.

input.scss

// Maps
// - Color Map
// - Major Breakpoints
// - Spacing
// - Font Sizes
// - Font Family
// - Font Weight
// - Display
// - Text Align
// - Flexbox Properties
// Functions
// Mixins
// Utilities

// default -> inside /node_modules/sparkle
$settings: (
    'utilPrefix': 'sbx',
    'colorUtil': true
) !default;


$colors: (
    'red': #900,
    'green': #090,
    'blue': #009
) !default;

// --------- //


// config -> ./config.scss
$settings: map-merge(
    $settings,
    (
        'utilPrefix': 'util',
        'colorUtil': false
    )
);

$colors:(
    'red': #f00
);



// functions
@function settings($val) {
    @return map-get($settings, $val);
}

@function color($val) {
    @return map-get($colors, $val);
}

.this-test {
    test:  color('red');
}

@if settings(colorUtil) {
    .#{settings(utilPrefix)}- {
      @each $key, $val in $colors {
        &color-#{$key} {
          color: $val;
        }
      }
    }
}

output.css

.this-test {
  test: #f00;
}

settings.json

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