如何有条件地将CSS应用于不同的嵌套内容

Question

I'm using sass and the structure of the page is not easily changed.

I have the following structure because my header is two different sizes depending on the page of the site users are visiting:

<div class="container">
  <div class="header">
    <div id="large-header"></div> (or <div id="small-header"></div>)
  </div>
  <div class="full-screen-menu"></div>
</div>

I want full screen menu to either be 50px or 100px depending on if .header > #small-header or .header > #large-header so that the header is still visible with the full screen menu. Ideally I'd be able to use a conditional like

.container {
  @if .header > #large-header {
    .full-screen-menu {
      top: 100px;
    }
  } @else {
    .full-screen-menu {
      top: 50px;
    }
  }
}

The problem is that I can't use if statements and I also don't know a way to check a conditional traversing up the DOM of one div and have it apply to a div further down the page that share a common parent.

Do you have any ideas for how I could accomplish this?

Answer 1

SCSS:

.container {
  .header {
     height:100px;
  }

  .full-screen-menu {
     height:100px;
  }

  &--small-header {
    .header {
      height:50px;
    }

    .full-screen-menu {
      height:50px;
    }
  }
}

 .container .header { height: 100px; background:rgba(255,0,0,0.2); } .container .full-screen-menu { top: 100px; background:rgba(0,0,255,0.2); } .container--small-header .header { height: 50px; } .container--small-header .full-screen-menu { top: 50px; } 

 <div class="container"> <div class="header"> HEADER </div> <div class="full-screen-menu">MENU</div> </div> <hr/> <div class="container container--small-header"> <div class="header"> HEADER </div> <div class="full-screen-menu">MENU</div> </div> 

Answer 2

you can actually use something like this:

 .full-screen-menu {
   top: 50px;

   .header > #large-header > & {
     top: 100px;
   }
 }

just like putting an '&' before a nested selector appends it to the back of the parent selector, it works in reverse if you put it after a nested selector. So when thats compiled to css the selector is .header > #large-header > .full-screen-menu