2

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?

Community
  • 1
  • 1
Gary
  • 3,891
  • 8
  • 38
  • 60

3 Answers3

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.

cimmanon
  • 67,211
  • 17
  • 165
  • 171
  • Very cool, thanks. There are a lot of neat and useful Sass functions that it's hard to know and remember them all, but it's quite powerful the more I learn about it! – Gary Sep 26 '14 at 04:37
1

This is now possible in pure CSS with the :is() matching pseudo-class:

.one, .two {
  &:is(a) {
    color: blue;
  }
}
zessx
  • 68,042
  • 28
  • 135
  • 158
-3

Or you simply switch to stylus:

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

Codepen Example

Stefan Lehmann
  • 1