Generated by SassMeister.com.

input.scss

// Brand

$primary:       red;
$secondary:     green;
$tertiary:      blue;

// Colour variations

$shade-amount:  15%;
$trans-amount:  0.5;

// Palette Map

$colors: (
  primary: (
    base: $primary,
    light: lighten($primary, $shade-amount),
    dark: darken($primary, $shade-amount),
    trans: transparentize($primary, $trans-amount)
  ),
  secondary: (
    base: $secondary,
    light: lighten($secondary, $shade-amount),
    dark: darken($secondary, $shade-amount),
    trans: transparentize($secondary, $trans-amount)
  ),
  tertiary: (
    base: $tertiary,
    light: lighten($tertiary, $shade-amount),
    dark: darken($tertiary, $shade-amount),
    trans: transparentize($tertiary, $trans-amount)
 )
);

// MIXIN

// Quickly create utility classes based on the primary map keys;
// Pass in the map name, secondary key, then the utility class prefix and the attribute to create

@mixin createUtilities($map, $secondaryKey, $utilityClass, $attribute) {
  @each $primaryKey, $val in $map {
    .#{$utilityClass}-#{$primaryKey} {
     #{$attribute}:#{map-get($val, $secondaryKey)};
    }
  }
}


// USAGE

// @include createUtilities($colors, 'base', 'u-bg', 'background-color');
@include createUtilities($colors, 'base', 'u-text', 'color');
@include createUtilities($colors, 'light', 'u-text-light', 'color');

output.css

.u-text-primary {
  color: red;
}

.u-text-secondary {
  color: green;
}

.u-text-tertiary {
  color: blue;
}

.u-text-light-primary {
  color: #ff4d4d;
}

.u-text-light-secondary {
  color: #00cd00;
}

.u-text-light-tertiary {
  color: #4d4dff;
}

settings.json

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