Skip to main content

in ()

Signatures​

in ( $breakpoint )

Generates a media query rule for the given horizontal breakpoint and narrower.

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.
in ( $size )

Generates a media query rule for the given size and narrower.

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';

// 1. As a function
@debug break.in('md');
  // '(max-width: 767.98px)'

@debug break.in(800px);
  // '(max-width: 799.98px)'

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

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

  @include break.in(800px) {
    padding: 1rem;
  }
}
  // body { padding: 2rem }
  // @media (max-width: 767.98px) {
  //   body { padding: 1rem }
  // }
  // @media (max-width: 799.98px) {
  //   body { padding: 1rem }
  // }