Generated by SassMeister.com.

input.scss

.widget {
    $b: &;
    
    &__heading {
        color: navyblue;
    }
    
    // bad – does not evaluate to what we want
    &--halloween {
        &__heading {
            color: black;
        }
    }
    
        
    // good
    &--halloween {
        #{$b}__heading {
            color: orange;
        }
    }
}

output.css

.widget__heading {
  color: navyblue;
}
.widget--halloween__heading {
  color: black;
}
.widget--halloween .widget__heading {
  color: orange;
}

settings.json

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