CODEWITHSUNDEEP
csssass
savinger
savinger

Reputation: 6714

SASS - Complex Media Queries

Consider a container element with a toggle-able side menu. I can open and close the side menu simply by toggling the open class on container, affecting both child elements in my CSS. The .container spans the width of the screen and the side menu is 200px wide.

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

I have this implemented and it works well. Now let's introduce some responsive design to my .content class. I want my media queries to target when the div.content's width is greater than 1000px, so I'll need to account for whether or not the side menu is open.

.container {

  &.open {
    @media (min-width: 1201px) { // 1000px + 200px for the menu
      .content {
        ...
        #id { ... }
        div { ... }
      }
    }
  }

  &:not(.open) {
    @media (min-width: 1001px) {
      /* Duplicate from above! */
    }
  }
}

This totally works, but it requires I duplicate the CSS in both queries. Is there any way I can write this so as not to copy-paste the .content CSS? Can mixins support complex chunks of CSS? Anyway to "comma separate" the queries in SASS?

Upvotes: 2

Views: 353

Answers (1)

savinger
savinger

Reputation: 6714

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; } }

Upvotes: 1

Related Questions