bourbon - 使用 Bourbon Neat 改变外容器尺寸

Question

我正在学习与 Bourbon Neat 合作，而且我一直在使用 Bootstrap 的网格系统。我正在尝试重新创建 this Bootstrap grid page学习 Bourbon Neat 的基础知识。
我使用的设置是:

// Bourbon Neat Grid Settings
$column: 70px;
$gutter: 30px;
$grid-columns: 12;
$max-width: em(1170);
$visual-grid: true;

我确定了我的断点并使用 new breakpoint 设置它们函数，我还可以在其中更改列数。
但我想要改变的是容器大小。 在 Bootstrap 中，容器的最大宽度变化如下:

@media >1200px: max-width: 1170px;

@media >992px: max-width 970px;

@media >768px: max-width: 750px;

然而，在 Bourbon Neat 中，最大宽度用一个变量设置一次。我目前将它设置为 max-width: em(1170);我怎样才能让这个容器大小变化？如何使用 Bourbon Neat 而不是 Bootstrap 3 实现相同的示例页面？我知道在 Susy 你可以 set the container width

Answer 1

哇。这是一个多么令人困惑的话题。但感谢 dasginganinja 正确解释它。问题不在于如何更改 max-width 属性，而是如何更改 Neat 的 $max-width用于正确显示 Neat 视觉网格的变量。重申 dasginganinja 所说的，你不能精确地操纵变量，但你可以定位 body:before并设置一个与您的 outer-container() 匹配的 max-width 属性宽度。 MandsAtWork 走在正确的轨道上，但您无需编辑核心文件即可执行此操作。例如:

@import "bourbon";
@import "neat-helpers"; //IMPORTANT: ADD BEFORE GRID SETTINGS

// Visual Grid
$visual-grid: true;
$visual-grid-color: #d4d4d4;
$visual-grid-opacity: 0.3;

// Initial Grid Settings
$max-width: 100%;
$grid-columns: 4;

// Breakpoints
$sm_val:  480px;
$md_val:  640px;
$lg_val:  800px;
$xl_val:  1000px;
$xxl_val: 1400px;

$sm:  new-breakpoint(min-width $sm_val 6);
$md:  new-breakpoint(min-width $md_val 7);
$lg:  new-breakpoint(min-width $lg_val 8);
$xl:  new-breakpoint(min-width $xl_val 9);
$xxl: new-breakpoint(min-width $xxl_val 10);

@import "neat"; //IMPORTANT: ADD AFTER GRID SETTINGS

// Container
@mixin container {
    @include outer-container(100%);

    @include media($sm) {
        @include outer-container($sm_val);
    }

    @include media($md) {
        @include outer-container($md_val);
    }

    @include media($lg) {
        @include outer-container($lg_val);
    }

    @include media($xl) {
        @include outer-container($xl_val);
    }

    @include media($xxl) {
        @include outer-container($xxl_val);
    }
}

@if ($visual-grid) {
    body:before {
        @include container;
    }
}