Generated by SassMeister.com.

input.scss

.typicalWay {
    &__heading {
        color: red;
    }
    
    &.-halloween {
        .typicalWay__heading {
            color: orange;
        }
    }
}


.offer {
    $self: &;
    
    &__footer {
        font-size: 40px;
    }
    
    &.-holiday {
        #{ $self }__footer {
            font-size: 22px;
        }
    }
}

output.css

.typicalWay__heading {
  color: red;
}
.typicalWay.-halloween .typicalWay__heading {
  color: orange;
}

.offer__footer {
  font-size: 40px;
}
.offer.-holiday .offer__footer {
  font-size: 22px;
}

settings.json

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