Bourbon Neat——外容器是否必要？答案

【问题标题】：Bourbon Neat -- Is outer-container necessary?Bourbon Neat——外容器是否必要？
【发布时间】：2015-11-12 07:18:59
【问题描述】：

我想知道@include outer-container是否有必要？

我注意到无论有无行为（表面上）都是相同的。但是，我意识到假设这一点可能会产生影响。

page.html 带有外部容器

<div class = "container">
    <div class = "box"></div>
</div>

page.scss 带有外部容器

.container {
    @include outer-container;
    .box {
        @include span-columns(6);
    }
}

page.html 没有外部容器

<div class = "box"></div>

page.scss 没有外部容器

.box {
    @include span-columns(6);
}

这两种方法都产生了创建宽度为页面一半的 div 的相同效果。那么，@include outer-container 是否必要？

不使用它可能会产生什么影响？

【问题讨论】：

标签： bourbon neat

【解决方案1】：

参考 Neat 文档：

虽然是可选的，但还是推荐使用外部容器

它清除浮动，在视口中居中容器并设置最大宽度。以下：

.element {
    @include outer-container(100%);
  }

会输出这个：

.element {
    *zoom: 1;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .element:before, .element:after {
    content: " ";
    display: table;
  }

  .element:after {
    clear: both;
  }

我个人总是使用它们，因为您需要某种容器来放置您的span-columns

【讨论】：