CODEWITHSUNDEEP
sass
Wolforce
Wolforce

Reputation: 79

check if the parent has a specific class on it

This is the usual list where one of the items is .open

for this I want to check if the parent (in this case is .item but its not relevant i think) has a specific class. I've tried > but it doesnt seem to work.

Essentially how to put this:

&.open .info {
    display: none;
}

&.open .inner-info {
    display: flex;
}

inside of the their specific classes:


.info {
    display: flex;
    /* some other stuff */
}

.inner-info {
    display: none;
    /* some other stuff */
}

all of this is inside an .item{} block

So how do i have it so that i only have two blocks inside the .item{}?

Upvotes: 0

Views: 798

Answers (1)

Arkellys
Arkellys

Reputation: 7803

It seems overkill to me, but you can use a hacky way to do that using a mixin and various functions. Please note that this will work for your specific example but probably not for something else.

I used the helper functions str-to-list and nth-delete, which are not native to SASS.

@mixin parentWithClass($class) {
  $parent: nth-delete(str-to-list(#{&}), -1);
    
  @at-root #{selector.replace(&, $parent, #{$parent}#{$class})} {
    @content;
  }
}

.item {
  .inner {
    color: blue;
        
    @include parentWithClass(".open") {
      color: orange;
    }
  }
    
  .inner-info {
    color: red;
        
    @include parentWithClass(".open") {
      color: grey;
    }
  }
}

You can also nest -info in inner.

Upvotes: 1

Related Questions