Skip to main content

down-only ()

Generates a media query rule for the given vertical breakpoint.

Parameters

$breakpoint
The name of the breakpoint at which the generated rule should break.
Type
String

Return Value

String
A string representation of the media query condition that meets the requirements for the given breakpoint.

Example

@use '@sass-fairy/break' with (
$vertical-sizes: $your-sizes
);

// 1. As a function
@debug break.down-only('md');
// '(min-height: 768px) and (max-height: 991.98px)'

// 2. As a mixin
body {
padding: 2rem;

@include break.down-only('md') {
padding: 1rem;
}
}
// body { padding: 2rem }
// @media (min-height: 768px) and (max-height: 991.98px) {
// body { padding: 1rem }
// }