_media-query-context-problems.scss

// Sass Code

.selector {
  // This mixin's content block will be wrapped in this media query:
  // `@media (min-width: 540px)`
  @include size-class(regular) {
    width: span(5);
    
    @include font-size(auto, vw) {
      // Will output a font-size property and value within a media query:
      // `@media (max-width: 540px)`
      @include min-font-size-at(540px);
    }
  }
}

// CSS Output

@media (min-width: 540px) {
  .selector {
    width: /* whatever width */;
    font-size: 1.25vw;
  }
}

/* This media query below doesn't work */
@media (min-width: 540px) and (max-width: 540px) {
  .selector {
    font-size: 6.75px;
  }
}