Skip to main content


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

@use '@sass-fairy/break';

// 1. The variable’s default value...
@debug break.$horizontal-sizes;
// (x-small: 0, small: 576px, medium: 768px, large: 992px, x-large: 1200px, xx-large: 1400px)

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