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%;
  }
}

"liveSassCompile.settings.formats":[
     {
         "format": "compressed",
         "savePath": "/assets/css"
     }
 ]

//Variables
 $base: #3acec2;
 $base-dark: darken($base, 25%);
 $base-light: lighten($base, 25%);
 $complement: complement($base);
 $complement-light: lighten($complement, 10%);