down-between ()
Signatures
down-between ( $first-breakpoint, $second-breakpoint )
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.
Details
Parameters
$first-breakpoint
- The name of the smaller breakpoint at which the generated rule should break.
- Type
String
$second-breakpoint
- The name of the larger 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 breakpoints.
down-between ( $first-size, $second-size )
Generates a media query rule for the given sizes which is equal and taller than the smaller, and equal and shorter than the larger.
Details
Parameters
$first-size
- The smaller size at which the generated rule should break.
- Type
Number
$second-size
- The larger 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 sizes.
down-between ( $first-breakpoint, $second-size )
Generates a media query rule for the given vertical breakpoint and size which is equal and taller than the smaller, and equal and shorter than the larger.
Details
Parameters
$first-breakpoint
- The name of the smaller breakpoint at which the generated rule should break.
- Type
String
$second-size
- The larger 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 breakpoint and size.
down-between ( $first-size, $second-breakpoint )
Generates a media query rule for the given size and vertical breakpoint which is equal and taller than the smaller, and equal and shorter than the larger.
Details
Parameters
$first-size
- The smaller size at which the generated rule should break.
- Type
Number
$second-breakpoint
- The name of the larger 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 size and breakpoint.
Example
@use '@sass-fairy/break' with (
$vertical-sizes: $your-sizes
);
// 1. As a function
@debug break.down-between('md', 'xl');
// '(min-height: 768px) and (max-height: 1199.98px)'
@debug break.down-between(800px, 'xl');
// '(min-height: 800px) and (max-height: 1199.98px)'
// 2. As a mixin
body {
padding: 2rem;
@include break.down-between('md', 'xl') {
padding: 1rem;
}
@include break.down-between(800px, 'xl') {
padding: 1rem;
}
}
// body { padding: 2rem }
// @media (min-height: 768px) and (max-height: 1199.98px) {
// body { padding: 1rem }
// }
// @media (min-height: 800px) and (max-height: 1199.98px) {
// body { padding: 1rem }
// }