Generated by SassMeister.com.

input.scss

@mixin when($parent-selector, $child: &) {
    @at-root {
        #{$parent-selector} #{$child} {
            @extend #{$child};
            @content;    
        }
    }
}

.media {
    color: blue;
    
    &--flipped {
        color: green;
    }
    
    &--sidebar {
        color: purple;
        font-size: 1.6rem;
        
        @include when('.media--flipped') {
            color: red;
        }
    }
}

markup.html

<div class="media">
    <div class="media--sidebar">Hello</div>
</div>

<div class="media--flipped">
    <div class="media--sidebar">Hello</div>
</div>

output.css

.media {
  color: blue;
}
.media--flipped {
  color: green;
}
.media--sidebar, .media--flipped .media--sidebar {
  color: purple;
  font-size: 1.6rem;
}
.media--flipped .media--sidebar {
  color: red;
}

settings.json

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