scst를 컴파일하는 동안 부트 스트랩 4 컨테이너 그리드 오류가 발생했습니다.

Question

부트 스트랩 4 그리드 시스템에서 컨테이너 그리드 만 가져 오려고하는데 컴파일하는 동안 오류가 발생했습니다. 이유는 무엇입니까?

은 그래서 이것은 내 사용자 지정하는 SCS 파일입니다

$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/