Breakpoints in Dart SASS

_breakpoints.scss

@use 'sass:map';

$breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
);

@mixin media-breakpoint-up($breakpoint) {
  $size: map.get($breakpoints, $breakpoint); // Frissített szintaxis
  @if $size {
    @media (min-width: #{$size}) {
      @content;
    }
  } @else {
    @error "Nincs ilyen breakpont definiálva: #{$breakpoint}.";
  }
}

Usage

.container {
  width: 100%;
  
  @include media-breakpoint-up(md) {
    width: 80%;
  }

  @include media-breakpoint-up(lg) {
    width: 60%;
  }
}