Bootstrap 4 Container Gitterfehler beim kompilieren scss

Question

Ich versuche, nur das Container-Grid aus Bootstrap4 Grid-System zu bekommen, aber ich habe einen Fehler beim Kompilieren und ich verstehe wirklich nicht warum: |

so ist dies die meine benutzerdefinierte SCSS Datei:

$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(); 
    } 
} 

und das ist der Fehler:

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

Dies sollte mit bestimmten Variablen in einigen Medien-Abfragen erstellt werden, aber irgendwo der Film ist kaputt und ... also bitte geben Sie mir einen Hinweis oder etwas: |

Ich verwende https://www.sassmeister.com/ für Online-Compiling.

Answer 1

Wie der Fehler sagt, "das sind keine CSS-Werte". Dies ist, wo inspect-Funktion nützlich ist, nach Sass Verweis, gibt es eine Zeichenfolge mit dem Wert als seine Sass Darstellung. Der folgende Link zeigt Ihnen, wie Sie vorgehen müssen, wenn Sie Mixins zur Verwaltung von reaktiven Breakpoints mit Sass verwenden. https://www.sitepoint.com/managing-responsive-breakpoints-sass/