Sass - Media Query

sass.mquery.ex1

$tablet: 768px;

@mixin tablet {
   @media (max-width: #{$tablet}) {
       @content;
   } 
}

p {
    font-size: 18px;
    @include tablet {
        font-size: 16px;
    }
}

sass.mquery.ex2

// media-queries.scss (or .sass)

// small screen size (sm)
@media (min-width: 801px) {
  @include banner-sm();
}

// medium screen size (md)
@media (min-width: 992px) {
  @include banner-md();
}

// ---

.banner {
  text-align: center;
  font-size: 14px;
}

// called in media-queries.scss

@mixin banner-sm() {
  .banner {
    font-size: 20px;
  }
}

@mixin banner-md() {
  .banner {
    text-align: left;
    font-size: 25px;
  }
}