Generated by SassMeister.com.

input.scss

/* Notice in the compiled css how .world and .hello each have their own copies of the test mixin styles */
@mixin text {
  color: black;
  font-size: 30px;
  font-weight: bold;
}
.hello{
  @include text; 
}
.world{
  @include text;
  
  color: grey;
}

/* Notice in the compiled css how .world2 and .hello2 share the placeholder styles */
%text {
  color: black;
  font-size: 30px;
  font-weight: bold;
}
.hello2{
  @extend %text;
}
.world2{
  @extend %text;
  
  color: grey;
}

output.css

/* Notice in the compiled css how .world and .hello each have their own copies of the test mixin styles */
.hello {
  color: black;
  font-size: 30px;
  font-weight: bold;
}

.world {
  color: black;
  font-size: 30px;
  font-weight: bold;
  color: grey;
}

/* Notice in the compiled css how .world2 and .hello2 share the placeholder styles */
.world2, .hello2 {
  color: black;
  font-size: 30px;
  font-weight: bold;
}

.world2 {
  color: grey;
}

settings.json

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