viewports.scss

The current viewport is considered :

Resize your browser to see how matches change.

Query types

The samples below demonstrate to which named ranges your styles would apply, should you use @include viewports() with specific arguments.

@include viewports() will apply to ranges:

@include viewports(below ) will apply to ranges:

@include viewports(up-to ) will apply to ranges:

@include viewports(up-from ) will apply to ranges:

@include viewports(above ) will apply to ranges:

@include viewports('not' ) will apply to ranges:

Note that since "not" is a reserved word in SASS, in this case the operator needs to be quoted. Sorry about that.