Generated by SassMeister.com.

input.scss

// meta-programming part
@mixin dynamicallyAvailableExtend($placeholder) {
  %#{$placeholder} {
    @content;
  }
}

@mixin extend($placeholders...) {
  @each $placeholder in $placeholders {
    @extend %#{$placeholder};
  }
}

// extended-able mixins
@mixin autopadder($val) {
  $name: 'pad-#{$val}';
  $classname: '.#{$name}';
  // create an output class
  #{$classname} {
    padding: #{$val}px;
    margin:  #{$val}px;
  }
  // create the dynamic hook
  @include dynamicallyAvailableExtend($name) {
    @extend #{$classname};
  }
}

@mixin bg-color($color-name, $color-value) {
  $name: 'fill-#{$color-name}';
  $classname: '.#{$name}';
  #{$classname} {
    background-color: $color-value;
  }
  @include dynamicallyAvailableExtend($name) {
    @extend #{$classname};
  }
}

@mixin text-color($color-name, $color-value) {
  $name: '#{$color-name}-text';
  $classname: '.#{$name}';
  #{$classname} {
    background-color: $color-value;
  }
  @include dynamicallyAvailableExtend($name) {
    @extend #{$classname};
  }
}

// data
$list: ('td', 'th', 'p');

$palette: (
  dk: #333,
  md: #666,
  lt: #999,
);

// create ouput utility classes
@each $color-name, $color-val in $palette {
  @include bg-color($color-name, $color-val);
}

@each $color-name, $color-val in $palette {
  @include text-color($color-name, $color-val);
}

@for $i from 1 through 5 {
  @include autopadder($i);
}

// use dynamic extensions inside conventional cases
@each $item in $list {
  #{$item} {
    @include extend('pad-5');
  }
}

// extensions can be added one at a time
.cancel-btn {
  @include extend('pad-5');
  @include extend('fill-dk');
  @include extend('lt-text');
}

// or as a list of arguments
.submit-btn {
  @include extend(
    'pad-2',
    'fill-lt',
    'dk-text',
  );
}

output.css

.fill-dk, .cancel-btn {
  background-color: #333;
}

.fill-md {
  background-color: #666;
}

.fill-lt, .submit-btn {
  background-color: #999;
}

.dk-text, .submit-btn {
  background-color: #333;
}

.md-text {
  background-color: #666;
}

.lt-text, .cancel-btn {
  background-color: #999;
}

.pad-1 {
  padding: 1px;
  margin: 1px;
}

.pad-2, .submit-btn {
  padding: 2px;
  margin: 2px;
}

.pad-3 {
  padding: 3px;
  margin: 3px;
}

.pad-4 {
  padding: 4px;
  margin: 4px;
}

.pad-5, .cancel-btn, p, th, td {
  padding: 5px;
  margin: 5px;
}

settings.json

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