css - SASS - 复杂的媒体查询

Question

考虑一个带有可切换侧边菜单的容器元素。我可以简单地通过切换容器上的 open 类来打开和关闭侧边菜单，这会影响我的 CSS 中的两个子元素。 .container 横跨屏幕宽度，侧边菜单宽度为 200 像素。

<div class="container">
    <aside></aside>
    <div class="content"></div>
</div>

我已经实现了这个并且运行良好。现在让我们为我的 .content 类引入一些响应式设计。我希望我的媒体查询定位到 div.content 的宽度大于 1000 像素，因此我需要考虑侧边菜单是否打开。

.container {

  &.open {
    @media (min-width: 1201px) { // 1000px + 200px for the menu
      .content {
        ...
        #id { ... }
        div { ... }
      }
    }
  }

  &:not(.open) {
    @media (min-width: 1001px) {
      /* Duplicate from above! */
    }
  }
}

这完全有效，但它需要我在两个查询中复制 CSS。有什么办法可以写这个而不是复制粘贴 .content CSS？ mixins 可以支持复杂的 CSS block 吗？无论如何要在 SASS 中“逗号分隔”查询？

Answer 1

这有效。

@mixin content-1000px {
  .content {
    ...
    #id { ... }
    div { ... }
  }
}

&.open { @media (min-width: 1201px) { @include content-1000px; } }
&:not(.open) { @media (min-width: 1001px) { @include content-1000px; } }