Generated by SassMeister.com.

input.scss

// [_ngcontent_123] is automatically wrapped due to default ViewEncapsulation.Emulated

[_ngcontent_123] {
  .layout {
    display: flex;

    .item {
      flex: 1;

      .name {
        text-align: left;

        .a,
        .b,
        .c {
          font-size: small;
        }
      }
    }
  }
}

// Versus

[_ngcontent_123] {
  .layout {
    display: flex;
  }

  .item {
    flex: 1;
  }

  .name {
    text-align: left;
  }
  .a,
  .b,
  .c {
    font-size: small;
  }
}

output.css

[_ngcontent_123] .layout {
  display: flex;
}
[_ngcontent_123] .layout .item {
  flex: 1;
}
[_ngcontent_123] .layout .item .name {
  text-align: left;
}
[_ngcontent_123] .layout .item .name .a,
[_ngcontent_123] .layout .item .name .b,
[_ngcontent_123] .layout .item .name .c {
  font-size: small;
}

[_ngcontent_123] .layout {
  display: flex;
}
[_ngcontent_123] .item {
  flex: 1;
}
[_ngcontent_123] .name {
  text-align: left;
}
[_ngcontent_123] .a,
[_ngcontent_123] .b,
[_ngcontent_123] .c {
  font-size: small;
}

settings.json

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