Generated by SassMeister.com.

input.scss

@use "sass:selector";
@use "sass:string";
@use "sass:map";

.alert{
    $alert-class: & !global;
    color: green;
    display: flex;
    border: 1px solid yellow;
}
.button {
    $button-class: & !global;
    border: none;
    color: blue;
}

@function syntax-class-generator($component-class) {
    @return string.insert("#{$component-class}", $prefix, 2),
}

$prefix: "syn_";
$syntax_components: (
  "alert":  string.insert("#{$alert-class}", $prefix, 2),
  "button": string.insert("#{$button-class}", $prefix, 2),
  "avatar": syntax-class-generator(".avatar"),
);

#{map.get($syntax_components, "alert")}__open {
    display: block;
}

#{map.get($syntax_components, "button")}__open {
    display: block;
}

#{map.get($syntax_components, "avatar")}__open {
    display: block;
}

output.css

.alert {
  color: green;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  border: 1px solid yellow;
}

.button {
  border: none;
  color: blue;
}

.syn_alert__open {
  display: block;
}

.syn_button__open {
  display: block;
}

.syn_avatar__open {
  display: block;
}

settings.json

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