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...