Сетка контейнеров SCSS

Я пытаюсь получить только сетку контейнеров из системы сеток bootstrap4, но у меня ошибка компиляции, и я действительно не понимаю, почему?

так что это мой собственный файл scss:

$grid-gutter-width:           30px !default;
$enable-grid-classes:       true !default;

$grid-breakpoints: (
'xs' : 0px,
'sm' : 576px,
'md' : 768px,
'lg' : 992px,
'xl' : 1200px
) !default;

$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
) !default;

@mixin make-container() {
width: 100%;
padding-right: ($grid-gutter-width / 2);
padding-left: ($grid-gutter-width / 2);
margin-right: auto;
margin-left: auto;
}

// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
$min: breakpoint-min($name, $breakpoints);
@if $min {
    @media (min-width: $min) {
    @content;
    }
} @else {
    @content;
}
}

// For each breakpoint, define the maximum width of the container in a media query
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
@each $breakpoint, $container-max-width in $max-widths {
    @include media-breakpoint-up($breakpoint, $breakpoints) {
    max-width: $container-max-width;
    }
}
}

@if $enable-grid-classes {
.container {
    @include make-container();
    @include make-container-max-widths();
}
}

@if $enable-grid-classes {
.container-fluid {
    @include make-container();
}
}

и это ошибка:

    >>> Sass is watching for changes. Press Ctrl-C to stop.
    error style.scss (Line 30: ("xs": 0px, "sm": 576px, "md": 768px, "lg": 992px, "xl": 1200px) isn't a valid CSS value.)

Это должно быть скомпилировано в некоторых медиа-запросах с заданными переменными, но где-то фильм сломан и ... поэтому, пожалуйста, дайте мне подсказку или что-то в этом роде

Я использую sass --watch для компиляции