Generated by SassMeister.com.

input.scss

@use "sass:selector";
@use "sass:string";

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 16px;
    grid-row-gap: 24px;
    &_item {
        background-color: blue;
    }
}

:host-context(section) {
    background-color: red;
}

.grid-container {
    background: blue;
    .grid-item > & {
        color: black;
        @extend .grid-container
    }
}

app-column-selector {
    div.mat > & {
        div.mat-mdc > & {
            color: black;
        }
    }
}

@mixin test($config) {
    #{$config}: 14px;
}

.main {
    color: black;
    @include test(font-size);
    >span::before {
        color: green;
        content: "FOO";
    }
}

/* Multiple Modifier */
@mixin mm($modifier, $mat-element: null) {
    $len: str-length(#{&}); /* Get parent string length */
    $elementLength: str-length($mat-element);
    $elementDot: str-insert($mat-element, ".", $elementLength + 10);
    $element: str-quote($elementDot);
    $parent: str-slice(#{&}, 2, $len); /* Remove leading . */
    

    @if $mat-element {
        @at-root #{$mat-element}[class*='#{$parent}'][class*='_#{$modifier}'] {
            // @content;
             & {
                 @content;
                 color: black;
             }
        }
    } @else {
        @at-root [class*="#{$parent}"][class*="_#{$modifier}"] {
        @extend .#{$parent};
        @content;
        }
    }
}

.test-override {
    &--mat-form-field {
        color: red;
        // @include mm(no-label) {
        //     font-size: 28px;
        // }
        @include mm(fat-border,div) {
            border: 6px solid black;
            .child-span {
                color: blue;
            }
        }
        @include mm(green-label, div){
            color: green;
        }
    }
}

@mixin unify-parent($child) {
  @at-root #{selector.unify(&, $child)} {
    @content;
  }
}

.field {
  @include unify-parent("input") {
    /* ... */
  }
  @include unify-parent("p") {
    /* ... */
  }
}

.aprimo-override {
  &--mat-form-field {
    @include mm(margin-bottom, mat-form-field) {
      margin-bottom: 1.34375em !important;
    }
  }
}


// div {
//     &[class*="test-override--mat-form-field"][class*="_fat-border"] {
//         border: 2px solid orange;
//     }
// }
    
    

markup.html

<section class="grid-container test">
    <div class="grid">
        <div class="grid_item">item</div>
        <div class="grid_item">item</div>
        <div class="grid_item">item</div>
        <div class="grid_item">item</div>
        <div class="grid_item">item</div>
        <div class="grid_item">item</div>
    </div>
</section>

<span class="main test">This is the main <span class="test"> test</span></span>
<div class="mat-mdc-form-field some-class test-override--mat-form-field_no-label_fat-border">
        This is the div-override
        <span class="child-span">child span</span>
</div>

<div class="test-override--mat-form-field_fat-border_green-label">
        This is the div-override
        <span class="child-span">child span</span>
</div>
    
    

output.css

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 16px;
  grid-row-gap: 24px;
}
.grid_item {
  background-color: blue;
}

:host-context(section) {
  background-color: red;
}

.grid-container, .grid-item > .grid-container {
  background: blue;
}
.grid-item > .grid-container {
  color: black;
}

div.mat-mdc > div.mat > app-column-selector {
  color: black;
}

.main {
  color: black;
  font-size: 14px;
}
.main > span::before {
  color: green;
  content: "FOO";
}

/* Multiple Modifier */
.test-override--mat-form-field {
  color: red;
  /* Get parent string length */
  /* Remove leading . */
  /* Get parent string length */
  /* Remove leading . */
}
div[class*=test-override--mat-form-field][class*=_fat-border] {
  border: 6px solid black;
  color: black;
}
div[class*=test-override--mat-form-field][class*=_fat-border] .child-span {
  color: blue;
}

div[class*=test-override--mat-form-field][class*=_green-label] {
  color: green;
  color: black;
}

input.field {
  /* ... */
}

p.field {
  /* ... */
}

.aprimo-override--mat-form-field {
  /* Get parent string length */
  /* Remove leading . */
}
mat-form-field[class*=aprimo-override--mat-form-field][class*=_margin-bottom] {
  margin-bottom: 1.34375em !important;
  color: black;
}

settings.json

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