Skip to main content

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 }
  // }