Bourbon Neat可改变外部容器的大小

Question

我正在学习使用Bourbon Neat，我一直使用Bootstrap的网格系统。我试图重新创建这个Bootstrap网格页面来学习波旁威士忌的基本知识。

我使用的设置是：

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

我确定了我的断点，并用新的断点函数设置它们，在这个函数中我还可以更改列的数量。

但我想改变的是容器的大小在引导程序中，容器的最大宽度变化如下：

@media>1200px：最大宽度：1170px；

@media>992px：最大宽度970px；

@media>768px：最大宽度：750px；

然而，在Bourbon Neat中，最大宽度使用变量设置一次。我目前已将其设置为max-width: em(1170);如何让此容器大小发生变化？如何使用Bourbon Neat而不是Bootstrap 3实现相同的示例页面？我知道在Susy中，您可以设置容器宽度

Answer 1

哇。这是一个多么令人困惑的话题。但感谢dasginganija对它的正确解读。问题不在于如何更改最大宽度属性，而在于如何更改Neat的$max-width变量以正确显示Neat的视觉网格。要重申dasginganija的意思，您不能精确地操作变量，但可以以body:before为目标，设置与outer-container()宽度匹配的最大宽度属性。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;
    }
}

Answer 2

以下内容可能会起作用：

$large-screen:  new-breakpoint(max-width 1200px 12);
$medium-screen: new-breakpoint(max-width  992px 12);
$small-screen:  new-breakpoint(max-width  768px  6);
@mixin bootstrap-container {
    @include outer-container;
    @include media($large-screen)  { max-width: 1170px; }
    @include media($medium-screen) { max-width:  970px; }
    @include media($small-screen)  { max-width:  750px; }
}

然后按如下方式使用mixin：

#foo {
    @include bootstrap-container;
}

我很想听听你的反馈。

Answer 3

您可以在设置中使用一些CSS/SCSS覆盖来实现这一点。

假设你的SCSS文件中有这个，就像Bourbon Neat:中的标准一样

$max-width: 1000px;
@import "bourbon/bourbon";
@import "neat/neat";
.outer-container{
   @include outer-container;
}

目前，你用外容器包装的任何东西的最大宽度都是1000px（在你的例子中是1170em）。

要在不同的屏幕大小/媒体查询下更改容器的最大宽度，您可以在这些行之后包括媒体查询，以取代您的原始声明，例如

.outer-container{
   max-width: 800px;
   @media all and (min-width: 750px){
    max-width:1500px;
  }
}

在这个例子中，最大宽度最终将是800px宽，除非屏幕大小大于749px，在这种情况下，最大宽度将是1500px。

这是一个简单的过度骑行，感觉有点粗糙，但应该完成任务，一旦设置好，你就不用担心了。如果Bourbon Neat有一个合适的方法来做到这一点，我还没有注意到。

Answer 4

我认为这将回答您的问题：

您可以更改_grid-settings.scss中的$max-width变量值，然后将该样式表导入基本的苦味样式表，即_bitters.scss。

如果在不导入_grid-settings.scss的情况下更改$max-width的值，则outer-container宽度不会发生变化。

Answer 5

如果您需要visual-grid也能正常显示（就像我所做的那样），您可以将媒体查询添加到`neat/grid/_visual-grid.scss文件中的visual-grid mixin。显然，编辑核心整洁的文件并不理想，但我想不出其他方法来做到这一点。

        @mixin grid-column-gradient($values...) {
      background-image: -webkit-linear-gradient(left, $values);
      background-image: -moz-linear-gradient(left, $values);
      background-image: -ms-linear-gradient(left, $values);
      background-image: -o-linear-gradient(left, $values);
      background-image: unquote("linear-gradient(to left, #{$values})");
    }
    @if $visual-grid == true or $visual-grid == yes {
      body:before {
        content: '';
        display: inline-block;
        @include grid-column-gradient(gradient-stops($grid-columns));
        height: 100%;
        left: 0;
        margin: 0 auto;
        max-width: $max-width;
        opacity: $visual-grid-opacity;
        position: fixed;
        right: 0;
        width: 100%;
        pointer-events: none;
        @if $visual-grid-index == back {
          z-index: -1;
        }
        @else if $visual-grid-index == front {
          z-index: 9999;
        }
        @each $breakpoint in $visual-grid-breakpoints {
          @if $breakpoint {
            @include media($breakpoint) {
              @include grid-column-gradient(gradient-stops($grid-columns));
            }
          }
        }
        // HACK to get visual grid to display our max-width at our media queries
        @include media($large-screen)  { max-width: 1170px; }
        @include media($medium-screen) { max-width:  970px; }
        @include media($small-screen)  { max-width:  750px; }
      }
    }

很想听听其他人的解决方案

Answer 6

由于我无法发表评论，我想以Andrew Hacking的答案为基础，该答案使用了一个名为bootstrap-container的mixin。Voodoocode的评论说，这对视觉网格不起作用，因为它没有触及$max宽度变量。为了实现这一点，您需要一段代码来设置body:before的最大宽度。它会这样工作：

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

完成此操作后，外部容器宽度设置将在网格上生效。