Generated by SassMeister.com.

input.scss

.foo {
  color: blue;
  text-decoration: underline;

  @at-root {
    p#{&} { 
        color: red;
        text-decoration: none;
    }
    .bar#{&} { 
        color: red;
        text-decoration: none;
    } 
  }
}


.foo {
  strong {
     color: green;
  }
  
  em {
     color: red;
  }
  
  .test {
     color: blue;
  }
  
  &.test {
     color: black;
  }
  
  &#{&} { 
     color: orange;
  }
  
  @at-root {
    p#{&} { 
        color: yellow;
    }    
  }
}

output.css

.foo {
  color: blue;
  text-decoration: underline;
}
p.foo {
  color: red;
  text-decoration: none;
}

.bar.foo {
  color: red;
  text-decoration: none;
}

.foo strong {
  color: green;
}
.foo em {
  color: red;
}
.foo .test {
  color: blue;
}
.foo.test {
  color: black;
}
.foo.foo {
  color: orange;
}
p.foo {
  color: yellow;
}

settings.json

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