SASS 基于侧边栏改变 flex 布局答案

【问题标题】：SASS change flex layout based on sidebarSASS 基于侧边栏改变 flex 布局
【发布时间】：2025-12-04 08:45:01
【问题描述】：

我正在尝试更改使用 flex 显示的卡片的布局。当侧边栏未打开时，我可以使用它。当我向父元素添加一个名为“nav-opened”的类时，样式并没有改变弹性比率，它似乎总是 33.33%。

我的 SASS 是否缺少某些东西？提前致谢。

<div class="main-content" [class.nav-opened]="isOpened">
   <div [@reducedMainContent]="marginsReduced ? 'reduced' : 'full'" 
        class="reactive-pane">
      <div class="router" *ngIf="!loading">
           <router-outlet></router-outlet>
      </div>
   </div>
</div>

这就是 HTML。

更新：

@media (min-width: 1090px) {
  div.main-content:not(.nav-opened) {
    .card {
      flex: 0 0 33.33%;
      max-width: 33.33%;
    }
  }
  div.nav-opened .card {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

我没有意识到 :not 检查不包含该类的第一个 div，所以我将其更具体。

现在的问题是它没有应用这两种样式中的任何一种。

这是我没有打开侧边栏时的样子。它看起来不错，并且可以正常工作，我将 css 设置为直接设置 .card。

这就是问题所在。希望这会有所帮助。在上面的 css 中，我试图让它变成 50% 而不是下图的 33%。

【问题讨论】：

这是 SASS 吗？如果没有，你不能像这样嵌套 css 选择器。应该是 div:not(.nav-opened) .card {...}
是的，这是 SASS 抱歉让我更新
请发布您的 html。不看页面结构很难找到问题。
请稍等。它使用角度。我也更新了 css 我越来越近但仍然无法正常工作。生病更新我的最新更改
谢谢????暂时在这个问题上挠头。我能够进行快速测试，我的版本正在运行。我想在某个地方还有更多事情发生

标签： html css

【解决方案1】：

我最终进行了研究，似乎在使用不同的组件时，我们需要使用 :host-context 来让 angular 能够引用其他组件类。

@media (min-width: 1090px) {
  .card {
    flex: 0 0 33.33%;
    max-width: 33.33%;
  }
  :host-context(div.nav-opened) .card{
    flex: 0 0 50%;
    max-width: 50%;
  }
}

这是工作代码。希望这对其他人有所帮助，这样他们就不会像我一样疯狂地寻找答案。

【讨论】：