SASS - 复杂媒体查询

考虑具有可切换侧边菜单的容器元素。我可以简单地通过切换容器上的open类来打开和关闭侧边菜单，影响CSS中的两个子元素。 .container横跨屏幕宽度，侧面菜单宽度为200px。SASS - 复杂媒体查询

<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中的查询？

来源

2013-09-27 Spencer Avinger

媒体查询不会评估元素样式信息，因此您无法通过媒体查询来做到这一点，但是可以使用逗号将媒体查询分组，例如， '@media（min-width：1201px），（min-width：1001px）'（尽管在这种情况下，'1201px'查询将是多余的）。 – BoltClock

嗯......不。它为我工作。我只是要求更好的语法。请再次阅读问题，你不明白。 –

你说过“我希望我的媒体查询在** div.content的宽度大于1000px **时指向”，我说你不能那样做。我误解了吗？ – BoltClock

这工作。

@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-27 18:21:29

SASS - 复杂媒体查询

回答

相关问题