How to read the current breakpoint tier(s) in JavaScript

Copy:root {
  --current-breakpoint-tier: xs;
  
  @media (min-width: $screen-sm-min) {
    --current-breakpoint-tier: sm;
  }
  @media (min-width: $screen-md-min) {
    --current-breakpoint-tier: md;
  }
  @media (min-width: $screen-lg-min) {
    --current-breakpoint-tier: lg;
  }
  @media (min-width: $screen-xl-min) {
    --current-breakpoint-tier: xl;
  }
  @media (min-width: $screen-xxl-min) {
    --current-breakpoint-tier: xxl;
  }
}

Copy// globally
getComputedStyle(document.documentElement).getPropertyValue('--current-breakpoint-tier')

// or locally
getComputedStyle(someElement).getPropertyValue('--current-breakpoint-tier')

Copy\:root
  @each $name, $min-width in $grid-breakpoints
    @media (min-width: $min-width)
      --current-breakpoint-tier: #{$name}