API Overview

Horizontal Breakpoints

$horizontal-sizes !default: A configurable map defining the dimensions at which layout will change, adapting to different screen widths, according to media queries.
$horizontal-names: A list of sorted horizontal breakpoint names.
$horizontal-values: A list of sorted horizontal breakpoint values.

in ( $breakpoint ) [+1 overload]: Generates a media query rule for the given horizontal breakpoint and narrower.
in-between ( $first-breakpoint, $second-breakpoint ) [+3 overloads]: Generates a media query rule for the given horizontal breakpoints which is equal and wider than the smaller, and equal and narrower than the larger.
in-only ( $breakpoint ): Generates a media query rule for the given horizontal breakpoint.
out ( $breakpoint ) [+1 overload]: Generates a media query rule for the given horizontal breakpoint and wider.

Don’t see the function you’re looking for? Request a new feature describing a use case.

$vertical-sizes !default: A configurable map defining the dimensions at which layout will change, adapting to different screen heights, according to media queries.
$vertical-names: A list of sorted vertical breakpoint names.
$vertical-values: A list of sorted vertical breakpoint values.

down ( $breakpoint ) [+1 overload]: Generates a media query rule for the given vertical breakpoint and shorter.
down-between ( $first-breakpoint, $second-breakpoint ) [+3 overloads]: Generates a media query rule for the given vertical breakpoints which is equal and taller than the smaller, and equal and shorter than the larger.
down-only ( $breakpoint ): Generates a media query rule for the given vertical breakpoint.
up ( $breakpoint ) [+1 overload]: Generates a media query rule for the given vertical breakpoint and taller.

annotate ( [$direction] [, $position] [, $color] [, $size] ): Enables a fixed annotation displaying the active breakpoints of the viewport.

Don’t see the function you’re looking for? Request a new feature describing a use case.