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>

我希望全屏菜单为50px或100px，具体取决于.header > #small-header或.header > #large-header，以便在全屏菜单中标题仍然可见。理想情况下，我可以使用条件类似

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

问题是我无法使用if语句，而且我也不知道一种方法来检查条件遍历一个div的DOM并将其进一步应用于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

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

2 个答案: