2

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

<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？mixins 可以支持复杂的 CSS 块吗？无论如何要“逗号分隔”SASS中的查询？

4

1 回答 1

1

This worked.

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

&.open { @media (min-width: 1201px) { @include content-1000px; } }
&:not(.open) { @media (min-width: 1001px) { @include content-1000px; } }
于 2013-09-27T18:21:29.320 回答