css - How can I nest a selector with ::after psudo class using SCSS?

Question

I have a selector with ::after pseudo class. When I'm nesting it the result is wrong!

This is my SCSS:

#room .message::after {
  content: "";
  position: absolute;
  left: -8px;
  &.owner {
    left: 4px;;
  }
}

And the compiled CSS:

#room .message::after {
  content: "";
  position: absolute;
  left: -8px;
}

/* This is wrong*/
#room .message::after.owner {
  left: 4px;
}

But this is what I want:

#room .message::after {
  content: "";
  position: absolute;
  left: -8px;
}

#room .message.owner::after{
  left: 4px;
}

标签： csssassnested

Answer 1

the & give you all string of your previous selection.

#room .message::after and #room .message.owner::after are two different part. use this

#room .message {
 &::after {
    content: "";
    position: absolute;
    left: -8px;
 }

 &.owner::after {
   left: 4px;
 }
}