Interpolation with parent reference (#{&}) inside multiple selector generates incorrect selector

When you have a multiple selector and then you have #{&} interpolation inside, you get very strange output:

.a,
.b,
.c,
.d {
    #{&} .foo {
        width: 25px;
    }
}

Renders now (using gem install sass --pre) to:

.a .a, .a .b, .a .c, .a .d .foo,
.b .a,
.b .b,
.b .c,
.b .d .foo,
.c .a,
.c .b,
.c .c,
.c .d .foo,
.d .a,
.d .b,
.d .c,
.d .d .foo {
  width: 25px; }

I won’t call it expected 😃

[kizu]

This is just a minimal example, in my case it is used for bem-like classes, like this:

#{&}__element {
}

Which is impossible without interpolation. And in some complex cases things like this:

.block1,
.block2,
.block3,
.block4 {
    #{&}__element1,
    #{&}__element2,
    #{&}__element3,
    #{&}__element4 {
        width: 25px;

        #{&}_modifier1,
        #{&}_modifier2,
        #{&}_modifier3,
        #{&}_modifier4 {
            width: 50px;
        }
    }
}

Again, artifical example, but not impossible, there could be such cases, but with current Sass it expands… look for yourself, I won’t put here those 653kb and 131150 lines of generated trash 😃

[lolmaus]

This also fails miserably:

.fieldset {
  background: red;
  #{&}-field {
    background: blue;
    #{&}-label {
      background: green;
    }
  }
}

Produces:

.fieldset {
  background: red;
}
.fieldset .fieldset-field {
  background: blue;
}
.fieldset .fieldset-field .fieldset .fieldset-field-label {
  background: green;
}

Should produce:

.fieldset {
  background: red;
}
.fieldset-field {
  background: blue;
}
.fieldset-field-label {
  background: green;
}

In Less and Stylus this works fine since forever.

@kizu, could you please mention “parent selector” and “&” in this thread’s title?

UPD: works as a charm like this (kudos to @Snugug):

.fieldset {
  background: red;
  @at-root #{&}-field {
    background: blue;
    @at-root #{&}-label {
      background: green;
    }
  }
}