Prepending a selector using @at-root fails with multiple parent selectors

[tedw]

Not sure if this is intended, but would prefer @at-root be applied to each parent selector:

SCSS

.parent {
  &:hover,
  &:focus,
  &:active {
    .child {
      @at-root .ROOT#{&} {
        content: 'Only the first selector gets “.ROOT” instead of all of them';
      }
    }
  }
}

CSS

.ROOT.parent:hover .child,
.parent:focus .child,
.parent:active .child {
  content: 'Only the first selector gets “.ROOT” instead of all of them';
}

http://www.sassmeister.com/gist/f5b5db378086086f047570700621b506

[chriseppstein]

Sass provides functions for working with selectors. Use this instead:

.parent {
  &:hover,
  &:focus,
  &:active {
    .child {
      @at-root #{selector-append(".ROOT", &)} {
        content: 'Only the first selector gets “.ROOT” instead of all of them';
      }
    }
  }
}

[chriseppstein]

More selector functions are documented here: http://sass-lang.com/documentation/Sass/Script/Functions.html#selector_functions

[tedw]

@chriseppstein Oh, awesome, thanks!

[bichotll]

@chriseppstein out of curiosity...what's the use of at-root in that case then?

[Julix91]

@bichotll - I think you'd have to have some code that applies to these selectors except the .ROOT

I for one am ecstatic to have found that this exists :) Looking forward to playing with it.

[eddkalosha]

Sass provides functions for working with selectors. Use this instead:

.parent {
  &:hover,
  &:focus,
  &:active {
    .child {
      @at-root #{selector-append(".ROOT", &)} {
        content: 'Only the first selector gets “.ROOT” instead of all of them';
      }
    }
  }
}

you may try simply

@at-root .ROOT & { your child element code here… }

This is working fine for me for multiple selectors.