sassメディアクエリーmixin

/*---- variables ----*/
$large: 'screen and (min-width: 768px)';
$small: 'screen and (max-width: 767px) and (min-width: 320px)';

/*---- Mixins ----*/
@mixin mq($mqString) {
  @media #{$mqString} {
    @content;
  }
}

@includeを使用してmixinを導入します.

.trail-container {
  margin-left: auto;
  margin-right: auto;
  text-align: center;

  @include mq($large) {
    width: 800px;
    margin-top: -40px;
  }

  @include mq($small) {
    width: 100%;
  }
}