In Sass, how to reference two parent classes with ampersand to compound with an element?

Question

Using the method found here, it works, but not for two parent classes.

For instance:

.one, .two {
  @at-root a#{&} {
    color: blue;
  }
}


        

Answer 1

Or you simply switch to stylus:

.one,
 .two {
   a& {
   color: blue;
 }
}

Codepen Example

Answer 2

You want to use the selector-append() function instead:

.one, .two {
  @at-root #{selector-append(a, &)} {
    color: blue;
  }
}

Using interpolation on the parent selector causes Sass to evaluate it as a string (because that's what interpolation does). This only makes it acceptable to use when you have a single selector. The selector-append (and all other selector-* functions) will evaluate the selector as a list of selectors, appending your desired item to each selector in the list.