Sass and Compass for Designers

Variations on a theme

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