SASS Mix-in Example for Media Query

mixin-media-query-example.scss

@mixin mq-at-least($device-width) {
  @media screen and (min-width: $device-width){
    @content;
  }
}

.container {
  width: 100%;  
  @include mq-at-least(768px){
    max-width: 50%;
  }
}

/* generated css:  */
.container {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .container {
    max-width: 50%;
  }
}