At present, our mixin has us covered if we want to target styles for certain width ranges, for example, between the S and M ranges (remember, we are setting those values in the _variables.scss file). However, often it makes more sense to target rules based upon any viewport width above a certain range. To exemplify, instead of this:

@media only screen and (min-width: 30em) and (max-width: 46em) {
 
} 

Where we are limiting the styles to a range between the minimum and maximum values, we want to produce something like this:

@media only screen and (min-width: 30em) {
 
}

So, let's add to our mixin to include this functionality. Below the existing @else if statements (right before the final closing curly brace), add this:

@else if $canvas == XSplus {
  @media only screen and (min-width: $XS) { @content; }
}

With that in place, we can pass a new argument to our mixin when we need it. For example:

@include MQ(XSplus) {
  /* styles here */
}

This produces the following CSS:

@media...