The current viewport is considered "". Below, you can see which viewport ranges have been configured (you can totally change them) and how they match up with specific viewport widths:
Make your browser window smaller Resize your browser to see how matches change.
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.
$VIEWPORTS_DEBUG: true; in your project,
and you'll get this to help with picking your breakpoints!
It's completely CSS-generated, so no JS needed.