Generated by SassMeister.com.

input.scss

@use "sass:color";

$white: #FFFFFF;

$bg-01: #202123;
$bg-02: #252628;
$bg-03: #2B2C2E;
$bg-04: #2F3032;
$bg-05: $white;
$bg-06: $white;
$bg-07: $white;
$bg-08: #15AF94;
$bg-09: #3AD9BC;


@mixin opacity($value) {
  $IEValue: $value;
  opacity: $value / 100;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$IEValue+")";
  filter: alpha(opacity=$IEValue);
}


$bg-colors: (
  '01': (
    primary: (
      color: $bg-01,
      opacity: 100
    ),
    secondary: (
      color: $bg-01,
      opacity: 50
    )
  ),
  '02': (
    primary:(
      color: $bg-02,
      opacity: 50)
  ),
  '03': (
    primary:(
      color: $bg-03,
      opacity: 100)
  ),
  '04': (
    primary:(
      color: $bg-04,
      opacity: 100)
  ),
  '05': (
    primary:(
      color: $bg-05,
      opacity: 20)
  ),
  '06': (
    primary:(
      color: $bg-06,
      opacity: 5)
  ),
  '07': (
    primary:(
      color: $bg-07,
      opacity: 3)
  ),
  '08': (
    primary:(
      color: $bg-08,
      opacity: 10)
  ),
  '09': (
    primary:(
      color: $bg-09,
      opacity: 10)
  ),
);


@debug lighten(#6b717f, 20);

@mixin createBgColors($colorsMap, $utilityClass, $attribute, $attributeValue, $hasAlpha: false) {
  @each $bgName, $bgMap in $colorsMap {
    @each $key, $value in $bgMap {
      @if($hasAlpha){
        $opacity: map-get($value, 'opacity');
        .#{$utilityClass}-#{$bgName}_opacity-#{$opacity} {
          #{$attribute}: color.change((map-get($value, $attributeValue)), $alpha: $opacity/100);
        }
      }@else{
        .#{$utilityClass}-#{$bgName} {
          #{$attribute}: #{map-get($value, $attributeValue)};
        }
      }
    }
  }
}
@include createBgColors($bg-colors,  'bg', 'background-color', 'color', true);

body{
  @extend .bg-01_opacity-100;
}

.mega-block-with-opacity{
   @include opacity(100);
}

output.css

.bg-01_opacity-100, body {
  background-color: #202123;
}

.bg-01_opacity-50 {
  background-color: rgba(32, 33, 35, 0.5);
}

.bg-02_opacity-50 {
  background-color: rgba(37, 38, 40, 0.5);
}

.bg-03_opacity-100 {
  background-color: #2b2c2e;
}

.bg-04_opacity-100 {
  background-color: #2f3032;
}

.bg-05_opacity-20 {
  background-color: rgba(255, 255, 255, 0.2);
}

.bg-06_opacity-5 {
  background-color: rgba(255, 255, 255, 0.05);
}

.bg-07_opacity-3 {
  background-color: rgba(255, 255, 255, 0.03);
}

.bg-08_opacity-10 {
  background-color: rgba(21, 175, 148, 0.1);
}

.bg-09_opacity-10 {
  background-color: rgba(58, 217, 188, 0.1);
}

.mega-block-with-opacity {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
}

settings.json

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