Generated by SassMeister.com.

input.scss

@mixin wrapComponent($selector) {
    :host, 
    .#{$selector} {
        @content;
    }
}

@mixin wrapSlot($slotName) {
    slot[name="#{$slotName}"] {
        @content;
    }
}

@mixin wrapSlotted($slotName) {
    ::slotted([slot="#{$slotName}"]) {
        @content;
    }
}


@include wrapComponent(otds-button) {
    background: red;
    
    @include wrapSlot("") {
        background: blue;
    }
    
    @include wrapSlot(title) {
        background: green;
    }
    
    @include wrapSlotted("") {
        background: cyan;
    }
    
    @include wrapSlotted(title) {
        background: magenta;
    }
}

output.css

:host,
.otds-button {
  background: red;
}
:host slot[name=""],
.otds-button slot[name=""] {
  background: blue;
}
:host slot[name=title],
.otds-button slot[name=title] {
  background: green;
}
:host ::slotted([slot=""]),
.otds-button ::slotted([slot=""]) {
  background: cyan;
}
:host ::slotted([slot=title]),
.otds-button ::slotted([slot=title]) {
  background: magenta;
}

settings.json

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