CODEWITHSUNDEEP
htmlcsssass
shiva
shiva

Reputation: 3941

Nesting with two levels in scss not working

Let's say I have a page which displays emotion and the corresponding text for it. I wanted to change color of text based on the type of emotion. I've followed nesting inside text class but that didn't apply the styles mentioned for the text alone. Is there any way to do this?

.emotion{
  display: flex;
  &__text {
    outline: 1px solid blue; // Not applied
    &--happy{
      color: rebeccapurple
    }
    &--sad{
      color: yellow
    }
  }
}
<div class="emotion">
  <span class="emotion__text--happy">
    Happy
  </span>
<!--   <span className="emotion__text__sad"></span>
  <span className="emotion__text__tears"></span>
  <span className="emotion__text__joy"></span> -->
  <span class="emotion__happy"> 
    šŸ˜€
  </span>
</div>

Upvotes: 0

Views: 220

Answers (1)

Quentin
Quentin

Reputation: 943143

Your SCSS:

.emotion { &__text { outline: 1px solid blue; } }

means the same as this CSS:

.emotion__text { outline: 1px solid blue; }

And the class selector .emotion__text means:

āœ… Elements which are members of the emotion__text class.

You don't have any elements that match.

You have an element with class="emotion" and one with class="emotion__text--happy" but not class="emotion__text"

It doesn't mean:

āŒ Elements which are members of any class which starts with emotion__text.

You could add that class to an element:

class="emotion__text emotion__text--happy"

Upvotes: 3

Related Questions