时间戳

首页 > 解决方案 > SCSS 容器网格

css - 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 进行编译

标签： csssass

解决方案

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

推荐阅读