Generated by SassMeister.com.

input.scss

@use 'sass:selector';

$hover-selector: '&:hover';
$focus-selector: '&.mdc-ripple-upgraded--background-focused, &:not(.mdc-ripple-upgraded):focus';
$active-selector: '&:active:active';

@mixin focus() {
  #{$focus-selector} {
    @content;
  }
}

@mixin active() {
  #{$active-selector} {
    @content;
  }
}

@mixin states-selector-before() {
  &:hover {
    @content;
  }
  @include focus {
    @content;
  }
  @include active {
    @content;
  }
}

@mixin states-selector-after() {
  #{$hover-selector},
  #{$focus-selector},
  #{$hover-selector} {
    @content;
  }
}

.mdc-foo-before {
    @include states-selector-before() {
        color: red;
        border: 1px solid red;
    }
}

.mdc-foo-after {
    @include states-selector-after() {
        color: red;
        border: 1px solid red;
    }
}

output.css

.mdc-foo-before:hover {
  color: red;
  border: 1px solid red;
}
.mdc-foo-before.mdc-ripple-upgraded--background-focused, .mdc-foo-before:not(.mdc-ripple-upgraded):focus {
  color: red;
  border: 1px solid red;
}
.mdc-foo-before:active:active {
  color: red;
  border: 1px solid red;
}

.mdc-foo-after:hover, .mdc-foo-after.mdc-ripple-upgraded--background-focused, .mdc-foo-after:not(.mdc-ripple-upgraded):focus, .mdc-foo-after:hover {
  color: red;
  border: 1px solid red;
}

settings.json

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