up ()
Signatures
up ( $breakpoint )
Generates a media query rule for the given vertical breakpoint and taller.
Details
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.
up ( $size )
Generates a media query rule for the given size and taller.
Details
Parameters
$size
- The size at which the generated rule should break.
- Type
Number
Return Value
String
- A string representation of the media query condition that meets the requirements for the given size.
Example
@use '@sass-fairy/break' with (
$vertical-sizes: $your-sizes
);
// 1. As a function
@debug break.up('md');
// '(min-height: 768px)'
@debug break.up(800px);
// '(min-height: 800px)'
// 2. As a mixin
body {
padding: 2rem;
@include break.up('md') {
padding: 1rem;
}
@include break.up(800px) {
padding: 1rem;
}
}
// body { padding: 2rem }
// @media (min-height: 768px) {
// body { padding: 1rem }
// }
// @media (min-height: 800px) {
// body { padding: 1rem }
// }