Generated by SassMeister.com.

input.scss

@import "normalize";
.btn, %btn {
  box-sizing: border-box;
  border: 1px gray solid;
  border-radius: .25rem;
  padding: .5rem 1rem;
}
.text-white, %text-white {
    color: #fff;
}
.bg-danger, %bg-dander {
    background-color: #dc3545;
}
.btn-danger {
  @extend %btn;
  @extend %text-white;
  @extend %bg-dander;
}
.btn-cyan {
  @extend %btn;
  @extend %text-white;
  background-color: #0aa2c0;
  border-color: darken(#0aa2c0, 15);
}

output.css

.btn, .btn-cyan, .btn-danger {
  box-sizing: border-box;
  border: 1px gray solid;
  border-radius: 0.25rem;
  padding: 0.5rem 1rem;
}

.text-white, .btn-cyan, .btn-danger {
  color: #fff;
}

.bg-danger, .btn-danger {
  background-color: #dc3545;
}

.btn-cyan {
  background-color: #0aa2c0;
  border-color: #066577;
}

settings.json

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

What's the % do?

@TriHydera https://sass-lang.com/documentation/style-rules/placeholder-selectors