How to group nesting of different SCSS classes

Question

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?

Answer 1

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

Answer 2

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

<div class="parent">
   <div class="open"></div>
   <div class="content"></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%;
    }
 }

So the solution which I think will work is :

&__open {              
        height: 159.5px;
}
 &__content {       
        max-height: 100%;
}