@scss-toolkit/breakpoint v2.0.0

breakpoint

github | npm | docs

SCSS Breakpoint Mixins. This provides two mixins

• respond-to: Useful when you want mobile-first responsive media queries.
• media-query: Low level utility that support min-width, max-width and width-range queries

To install

npm i -D @scss-toolkit/breakpoint

To Use

Configuring Breakpoints

@use 'breakpoint';

// If nothing is passed below config is used by default
$config: (
  'xs': 0,
  'sm': 576px,
  'md': 768px,
  'lg': 992px,
  'xl': 1200px,
);

@include breakpoint.configure($config);

breakpoint.respond-to

This takes key from the given configuration, and provides you with mobile-first responsive media query.

// For the above configurations you have
@use 'breakpoint';
@include breakpoint.respond-to('xs') {
  // content ouside any media query since the width is 0
}
@include breakpoint.respond-to('sm') {
  // content within @media screen and (min-width: 576px) { ... }
}
@include breakpoint.respond-to('md') {
  // content within @media screen and (min-width: 768px) { ... }
}
@include breakpoint.respond-to('lg') {
  // content within @media screen and (min-width: 992px) { ... }
}
@include breakpoint.respond-to('xl') {
  // content within @media screen and (min-width: 1200px) { ... }
}

breakpoint.media-query

• Screen Type Options:
  • all
  • screen
  • print
  • retina
• Size variation for every key in the config
  • >=
  • >
  • <=
  • <
  • ==

Possible variation for a key

@use 'breakpoint';
@include breakpoint.media-query('==sm') {
  // content within @media (min-width: 576px) and (max-width: 767.98px) { ... }
}
@include breakpoint.media-query('<sm') {
  // content within @media (max-width: 575.98px) { ... }
}
@include breakpoint.media-query('<=sm') {
  // content within @media (max-width: 576px) { ... }
}
@include breakpoint.media-query('>sm') {
  // content within @media (min-width: 576.02px) { ... }
}
@include breakpoint.media-query('>=xs') {
  // content within @media (min-width: 576px) { ... }
}

// edge cases for == (min and max breakpoints)
@include breakpoint.media-query('==xs') {
  // content within @media (max-width: 575.98px) { ... }
}
@include breakpoint.media-query('==xl') {
  // content within @media (min-width: 1200px) { ... }
}

Example:

@use 'breakpoint';
@include breakpoint.media-query('screen', '>=sm') {
  .x {
    background: red;
  }
}

Compiles To:

@media screen and (min-width: 576px) {
  .x {
    background: red;
  }
}