Как условно применить CSS к по-разному вложенному контенту

Question

Я использую sass, и структура страницы не так легко изменить.

У меня следующая структура, потому что мой заголовок имеет два разных размера в зависимости от страницы, которую посещают пользователи сайта:

<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>

Я хочу, чтобы в полноэкранном меню было 50 или 100 пикселей, в зависимости от того, .header > #small-header или .header > #large-header, чтобы заголовок оставался видимым в полноэкранном меню.В идеале я мог бы использовать условное выражение, например

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

. Проблема в том, что я не могу использовать операторы if, а также не знаю, как проверить условный обход DOM одногоdiv и примените ли это к div далее вниз по странице, имеющей общего родителя.

У вас есть какие-либо идеи о том, как мне это сделать?

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

на самом деле вы можете использовать что-то вроде этого:

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

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

, как если бы вы поместили '&' до того, как вложенный селектор добавит его в конец родительского селектора, он будет работать наоборот, если вы поставите его послевложенный селектор.Так что, когда это скомпилировано в CSS, селектор будет .header > #large-header > .full-screen-menu