Search code examples
csssassmedia-queriesmixins

In SASS can I wrap a bunch of style rules in both a media query and a selector

I have a bunch of styles which need to apply only to the desktop version of my site. I'm using media queries to apply these styles, but to avoid the site switching to the mobile design when resizing the window I now also add a class on page load if the screen is large.

At the moment I have

@media (min-width: $breakpoint) {
   // my styles
}

How would I go about writing a mixin to achieve something like

@media (min-width: $breakpoint),
.not-mobile {
   // my styles
}
Solution

  • Here's my solution

    $breakpoint: 768px;

@mixin not-mobile {
  @media (min-width: $breakpoint) {
    @content;
  }
  .not-mobile {
    @content;
  }
}