How to group nesting of different SCSS classes-CodePudding

This one works fine, but I need to set different styles for the elements:

&__open, &__content {
        height: 159.5px;
    }

But this one, which I tried, doesn't work:

&__open {
        height: 159.5px;

      &__content {
        max-height: 100%;
    }
    }

What did I do wrong?

CodePudding user response：

Not sure what you're trying to achieve, but if you want to have a nested &__ you can use:

$parent: &;
&__open {
   height: 159.5px;

   &#{$parent}__content {
       max-height: 100%;
   }
}

CodePudding user response：

suppose your parent class is "container" I am assuming your html to be like this:

<div >
   <div ></div>
   <div ></div>
</div>

so : when you do this ,

&__open, &__content {
        height: 159.5px;
    }

here , &(ampersand) refers to parent(i.e "container" in this case); so it is then converted to ,

.container__open, .container__content {
        height: 159.5px;
    }

by scss , But , when you do this ,

&__open {                // here & is "container" ( .container__open)
        height: 159.5px;

      &__content {       // here & refers to container__open , which causes unexpected result  (.container__open__content)
        max-height: 100%;
    }
 }