トグル可能なサイドメニューを持つコンテナ要素を考えてみましょう。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 をコピーして貼り付けないように、これを記述する方法はありますか? ミックスインは CSS の複雑なチャンクをサポートできますか? とにかく、SASSでクエリを「カンマで区切る」には?