scstをコンパイルするときにブートストラップ4コンテナのグリッドエラーが発生する

Question

bootstrap4グリッドシステムからコンテナグリッドのみを取得しようとしていますが、コンパイル時にエラーが発生しました。

ので、これは私のカスタムSCSSファイルです：

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

$grid-breakpoints: (
    xs: 0, 
    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(); 
    } 
} 

と、これは誤りです：

(xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) isn't a valid CSS value. 

これは、与えられた変数にいくつかのメディアクエリでコンパイルする必要がありますが、どこか 映画壊れているので、私にヒントをお願いします。

オンライン編集にhttps://www.sassmeister.com/を使用しています。

Answer 1

エラーは「CSS値ではありません」と表示されます。これは、Sassの参照によると、検査機能が便利になる場所で、Sass表現の値を含む文字列を返します。次のリンクは、Sassで反応性のあるブレークポイントを管理するためにミックスインを使用している場合の処理​​方法を示しています。 https://www.sitepoint.com/managing-responsive-breakpoints-sass/