Handle media queries in Scss with a respond-to function

Having it like this the respond-to function can handle any media query and put the parent it’s nested in inside of it. .factory in this case.

@mixin respond-to($type, $query) {
  @media ($type: $query) {
    @content;
  }
}

.factory {
  width: 100%;
  @include respond-to(min-width, 960px) {
    width: percentage(600px / 960px);
  }
  @include respond-to(max-width, 768px) {
    width: 50%;
  }
}

Add your comment