Gary Gary - 3 years ago 110
Sass (Sass) Question

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

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

For instance:

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


Produces:

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


Rather than the intended:

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


Is there any way to get the intended result using a similar method?

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download