Skip to main content


A configurable map defining the dimensions at which layout will change, adapting to different screen heights, according to media queries.

@use '@sass-fairy/break';

// 1. The variable’s default value...
@debug break.$vertical-sizes;
// (x-small: 0)

// 2. This variable is also configurable
@use '@sass-fairy/break' with (
$vertical-sizes: (x-small: 0, medium: 680px, large: 960px, x-large: 1200px)

There is not currently a useful default value for vertical breakpoint sizes. If you have a suggestion please contribute to the discussion.