Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

State:
Created 7 years ago
Comments:5

Top GitHub Comments

7reactions

chriseppsteincommented, Sep 8, 2016

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';
      }
    }
  }
}

0reactions

Julix91commented, Aug 14, 2018

@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.