Skip to main content

in-between ()

Signatures​

in-between ( $first-breakpoint, $second-breakpoint )

Generates a media query rule for the given horizontal breakpoints which is equal and wider than the smaller, and equal and narrower 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.
in-between ( $first-size, $second-size )

Generates a media query rule for the given sizes which is equal and wider than the smaller, and equal and narrower 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.
in-between ( $first-breakpoint, $second-size )

Generates a media query rule for the given horizontal breakpoint and size which is equal and wider than the smaller, and equal and narrower 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.
in-between ( $first-size, $second-breakpoint )

Generates a media query rule for the given size and horizontal breakpoint which is equal and wider than the smaller, and equal and narrower 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';

// 1. As a function
@debug break.in-between('md', 'xl');
  // '(min-width: 768px) and (max-width: 1199.98px)'

@debug break.in-between(800px, 'xl');
  // '(min-width: 800px) and (max-width: 1199.98px)'

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

  @include break.in-between('md', 'xl') {
    padding: 1rem;
  }

  @include break.in-between(800px, 'xl') {
    padding: 1rem;
  }
}
  // body { padding: 2rem }
  // @media (min-width: 768px) and (max-width: 1199.98px) {
  //   body { padding: 1rem }
  // }
  // @media (min-width: 800px) and (max-width: 1199.98px) {
  //   body { padding: 1rem }
  // }