Breakpoint SCSS

Yang sering ku pakai untuk media query lebih cepat dan mudah saat menggunakan scss

Variabel untuk setiap ukuran:

// _variables.scss
$breakpoints: (
  xs:   20em,     // 320px
  sm:   36em,     // 576px
  md:   48em,     // 768px
  lg:   62em,     // 992px
  xl:   75em,     // 1200px
  xxl:  87.5em    // 1400px
);

Mixins Breakpoints:

// _breakpoints.scss
@use './variables' as v;
@use "sass:map";

@mixin min($breakpoint) {
  @if map.has-key(v.$breakpoints, $breakpoint) {
    @media screen and (min-width: map.get(v.$breakpoints, $breakpoint)) {
      @content;
    }
  } @else if type-of($breakpoint) == number {
    @media screen and (min-width: $breakpoint) {
      @content;
    }
  } @else {
    @warn "Breakpoint '#{$breakpoint}' not found. Available breakpoints: #{map-keys(v.$breakpoints)}";
  }
}

@mixin max($breakpoint) {
  @if map.has-key(v.$breakpoints, $breakpoint) {
    @media screen and (max-width: map.get(v.$breakpoints, $breakpoint)) {
      @content;
    }
  } @else if type-of($breakpoint) == number {
    @media screen and (max-width: $breakpoint) {
      @content;
    }
  } @else {
    @warn "Breakpoint '#{$breakpoint}' not found. Available breakpoints: #{map-keys(v.$breakpoints)}";
  }
}

@mixin between($from, $to) {
  @if map.has-key(v.$breakpoints, $from) and map.has-key(v.$breakpoints, $to) {
    @media screen and (min-width: map.get(v.$breakpoints, $from)) and (max-width: map.get(v.$breakpoints, $to)) {
      @content;
    }
  } @else if type-of($from) == number and type-of($to) == number {
    @media screen and (min-width: $from) and (max-width: $to) {
      @content;
    }
  } @else {
    @warn "One or both breakpoints not found. Available breakpoints: #{map-keys(v.$breakpoints)}";
  }
}

Simpan Biar ngak lupa 😅