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 - 複雜媒體查詢

回答

相關問題