Question

考虑一个带有可切换侧边菜单的容器元素。我可以通过在容器上切换open类来打开和关闭侧面菜单，从而影响我的CSS中的两个子元素。 .container跨越屏幕宽度，侧面菜单宽200px。

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

我实现了这个并且效果很好。现在让我们为我的.content课程介绍一些响应式设计。当 div.content的宽度大于1000px 时，我希望我的媒体查询定位，因此我需要考虑侧边菜单是否打开。

.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？ mixin可以支持复杂的CSS块吗？无论如何以“逗号分开”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; } }

SASS - 复杂媒体查询

1 个答案: