Question

我正在尝试仅从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进行编译

Answer 1

在导入网格系统之前，尝试导入引导文件functions和variables。网格系统的文件可能正在使用这两个中的mixin和变量。

SCSS容器网格

1 个答案: