Generated by SassMeister.com.

input.scss

$once: ();
@mixin once($key){
    @if not index($once, $key){ 
        $once: append($once, $key) !global;
        @content; 
    }
}


@mixin theme-red {
    [theme-red] {
        @include once(theme-red){
            color: red;
        }     
    }
    @if & {
        &[theme-red]{
            @content(red);
        }
    }
}


@mixin component() {
    .component {
        @include theme-red using($color) {
            border-bottom: 2px solid $color;
        }
    }
}

/*
    Without "using" this will throw an error 
    0 arguments allowed 1 were passed

@mixin component {
    .component {
        @include theme-red {
            border-bottom: 2px solid $color;
        }
    }
}
*/


@include theme-red; 
@include component;

output.css

/*
    Without "using" this will throw an error 
    0 arguments allowed 1 were passed

@mixin component {
    .component {
        @include theme-red {
            border-bottom: 2px solid $color;
        }
    }
}
*/
[theme-red] {
  color: red;
}

.component[theme-red] {
  border-bottom: 2px solid red;
}

settings.json

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