本教程旨在使您入门。 为Sass和Bourbon构建的语义网格框架。

Bourbon Neat可使您的标记保持整洁，从而防止您使用网格，列和行类将其弄混。 相反，它利用了混合功能，并且通过将其各种混合功能应用于现有的标记，您可以创建灵活的响应式布局。 让我们探索最基本的mixin：

• 上下文转移
• 外容器
• 跨栏
• 欧米茄
• 转移
• 垫

注意：为了安装Bourbon Neat并开始使用Bourbon Neat，请看一下以前的教程Bourbon Neat：语义，非调理，响应式网格 。

外容器

此混合用于确定布局的容器或包装。 将其应用到元素，Neat将自动在视口中居中（通过添加margin-left: auto / margin-right: auto ），清除浮点并应用指定的$max-width 。 它是一个可选的mixin（尽管推荐），并且您可以在单个页面上包含多个外部容器元素。 您无法做的一件事就是将它们嵌套。

外部容器容纳您的网格。 在其中，网格可以通过$grid-columns变量（默认为12列）跨grid-settings文件中指定$grid-columns数。 行中的所有元素必须加起来等于此变量中指定的总列数。

在下面的虚拟示例中，您将看到container元素包装了一些aside和article标签。 它们分别跨越3列和9列，并且最多增加12列，如我的设置所指定。 如果我要超过该列数，则布局肯定会中断。 将outer-container混合视为在容器元素内添加一致的网格布局的最可能的前提。

哈姆：

.container%aside Aside: 3 columns%article Article: 9 columns%aside Aside: 3 columns%article Article: 9 columns%aside Aside: 3 columns%article Article: 9 columns

萨斯：

bodybackground-color: white.container+outer-containerbackground-color: #f5f5f5aside, articlepadding: 10pxmargin-bottom: 20pxheight: 100pxaside+span-columns(3)background-color: #81d4fa article+span-columns(9)+omegabackground-color: #e64a19

在此示例中，背景色使查看部件之间的装配更加容易。 而且，此时您不必担心omega mixin； 所有这些都将在适当时候披露。

在_grid-settings Sass部分中，您还可以指定$max-width Sass变量，该变量定义页面内容应跨越的最大宽度。 例如，Neat开箱即用，可轻松更改的$max-width设置为1088px（转换为em）。

如果您希望某个容器元素的max-width与grid-settings全局grid-settings max-width不同，则还可以为该mixin提供$local-max-width的参数。 在这里，您可以提供pixel ， em或percent参数。 该容器内的网格的列会自动调整其宽度，但列数保持不变。

萨斯：

.container+outer-container(800px)background-color: #f5f5f5

要么

.container+outer-container(80%)background-color: #f5f5f5

跨栏

如果您不熟悉网格设计，则应该研究Khoi Vinh撰写的出色的Ordering Disorder：Web设计的网格原理 。 我强烈推荐它。 您需要立即理解的一个概念是，通过跨页面的一系列列来构建网格设计。

Neat的基本用法非常简单。 您选择一个元素，并告诉它在$grid-columns总数中应该跨越多少$grid-columns 。 让我演示一下基础知识。

哈姆：

.container%aside.first  First: 2 columns%article.second  Second: 10 columns%aside.third  Third: 4 columns%article.fourth  Fourth: 8 columns%aside.fifth  Fifth: 6 columns%article.sixth  Sixth: 6 columns%aside.seventh  Seventh: 8 columns%article.eighth  Eighth: 4 columns%aside.ninth  Ninth: 10 columns%article.tenth  Tenth: 2 columns

萨斯：

bodycolor: whitebackground-color: white.container +outer-containerbackground-color: #f5f5f5aside, articlepadding: 10pxmargin-bottom: 20pxheight: 100pxarticlebackground-color: #e64a19asidebackground-color: #81d4fa.first+span-columns(2)
.third+span-columns(4)
.fifth+span-columns(6)
.seventh+span-columns(8)
.ninth+span-columns(10).second+span-columns(10)
.fourth+span-columns(8)
.sixth+span-columns(6)
.eighth+span-columns(4)
.tenth+span-columns(2).second, .fourth, .sixth, .eighth+omega

正如你所看到的，每行由一个蓝色的aside左边，一个红色article右边的元素。 布局不会中断，因为在外部容器元素中，它们的总列数和宽度之和等于12（按$grid-columns定义）。

最酷的部分是，无需在标记中添加任何样式信息，因为这与您的表示层有关，因此您只需定义Sass文件中网格的构成方式即可。 完全分开的关注点。 在您爱上您之后，每一个精打细算的设计师都会爱您，因为他们不会用样式信息污染内容。

另外一个好处是，您可以随时随地在标记中命名类。 没有人为您做出这些决定，这是没有任何掩饰的祝福。

嵌套列

有时不时需要将网格元素快速嵌套在另一个元素中。

萨斯：

.some-parent-element+span-columns(10).some-nested-element+span-columns(5 of 10)

假设您有一个跨10列的宽元素，并且应该合并两个跨5列的较小元素。 在这种情况下，请为嵌套元素提供父列的大小，作为span-columns mixin的参数。 让我们看一个更具体的例子。

哈姆：

.container%aside.first First: 2 columns%article.second%article.third Third: 5 nested columns%article.fourth Fourth: 5 nested  columns

萨斯：

bodycolor: whitebackground-color: white.container+outer-containerbackground-color: #f5f5f5padding:top: 15pxbottom: 15pxaside, articlepadding: 10pxmargin-bottom: 20pxheight: 100pxarticlebackground-color: #e64a19asidebackground-color: #81d4fa.first, .secondheight: 250px.second+span-columns(10).third, .fourth+span-columns(5 of 10)background-color: darken(#e64a19, 6)margin-top: 25px.first+span-columns(2)padding-top: 25px

欧米茄

对于新手来说，使用网格的另一个重要概念是装订线。 这是网格元素之间右侧的边距，并且会自动为容器中的每个网格元素（最后一个除外）创建一个边距！ 如果您调整浏览器窗口的大小，则装订线也会相应地缩放。 下面的示例演示了网格元素之间的空间。 装订线由外部容器发出的灰色背景表示。

哈姆：

.container.first  1 col.second 2 col.third  3 col.fourth 3 col.fifth  2 col.sixth  1 col

萨斯：

bodycolor: whitebackground-color: white.container+outer-containerbackground-color: #f5f5f5.first, .second, .third, .fourth, .fifth, .sixthbackground-color: #81d4fapadding: 10pxheight: 200px.first+span-columns(1).second+span-columns(2).third+span-columns(3).fourth+span-columns(3).fifth+span-columns(2).sixth+span-columns(1)

随便吧？ 但是，猜想如果我们通过复制其正下方的行来加倍列会发生什么呢？

噢亲爱的。 那么这里发生了什么？ 由于第一行中的第六个元素不再是最后一个元素 ，因此默认情况下它还会获得一个右装订线（边距）。 让我对此非常清楚：为了获得清晰对齐的布局，默认情况下，容器中的最后一个元素的装订线已删除。 由于在第六个元素上增加了装订线，因此第一行中所有元素的宽度现在超过了每行可以跨越的total-columns数的total-columns total-width ，并且网格中断。

没什么可悲的，而且修复很容易。 只需找到需要将右侧装订线移除的元素，然后在其中应用omega mixin。 做完了！

哈姆：

.container.first  1 col.second 2 col.third  3 col.fourth 3 col.fifth  2 col.sixth  1 col.first  1 col.second 2 col.third  3 col.fourth 3 col.fifth  2 col.sixth  1 col

萨斯：

bodycolor: whitebackground-color: white.container+outer-containerbackground-color: #f5f5f5.first, .second, .third, .fourth, .fifth, .sixthbackground-color: #81d4fapadding: 10pxheight: 200px.first+span-columns(1).second+span-columns(2).third+span-columns(3).fourth+span-columns(3).fifth+span-columns(2).sixth+span-columns(1)+omega

现在，每个元素都很好地放置到位，所有行都没有超出它们的total-width 。

让我们更进一步。 假设您有几行应均匀显示相同大小的图像而不会破坏网格。 我们需要的是几个具有相同宽度的元素，这里是span-columns(2) ，并将它们放置在几行中。 神奇之处在于您为omega提供了以下论据：

img+omega(6n)

在这里，每个第六个img元素都将删除其右装订线，因此将六个2-column元素均匀地装入外部容器的12列中。 整齐！

哈姆：

.container%img%img%img%img%img%img%img%img%img%img%img%img%img%img%img%img%img%img

萨斯：

bodycolor: whitebackground-color: white.container+outer-containerbackground-color: #f5f5f5img+span-columns(2)+omega(6n)height: 200pxmargin-bottom: 5pxbackground-color: #81d4fa

每行只需要四个元素？ 没问题！ 将omega的论点减少到4n 。 在下一个教程中，当我们进入响应式网格以及如何通过媒体查询更改布局时，此技术将派上用场。

萨斯：

img+omega(4n)

我鼓励您通过提供的笔来玩这个例子，并对此有所了解。 这里没有魔术，但是如果您需要更多的时间来围绕细节，请不要感到惊讶。 欧米茄的观点有些混乱，我毫不怀疑它将很快就变得清晰起来。

注意！

智慧的最后一句话：在某些情况下，向元素提供span-columns和omega mixins似乎很重要。 我的建议是始终先应用span-columns ，以免发生意外行为。

转移

这个混入应该很快。 如果要通过向左或向右水平移动元素来调整元素，则可以应用shift mixin，并为其提供应移动的列数。 您可以使用整数或浮点数。

萨斯：

.some-element-that-needs-adjusting+shift(n)

提供正数（无单位）的列以将元素向右移动，反之亦然。 在幕后，Neat增大或减小元素上的margin-left的百分比值。

注意：如果使用shift不带参数，它将默认为shift(1) 。

上下文转移

这种混合与shift具有相同的思想（它shift-in-context后台使用shift-in-context ），但是是为嵌套的网格元素制作的。 我在一个带有嵌套网格的虚拟示例中进行了一些处理，但老实说，我使用shift获得了相同的结果。

垫

我认为我不需要详细介绍其工作原理。 如果您提供带有default的mixin作为参数，它可以清理样式表并为您提供默认的装订线宽度。 没什么花哨的，但我想我会提到它来完成您调整网格间距的选择。

萨斯：

.some-element-that-needs-padding+pad(10px 20px 30px default)

结论

这就是您开始使用Neat网格所需要知道的一切。 这些示例应该为您提供了坚实的基础，使您能够构建所需的任何网格-无论您喜欢多复杂。

下一个教程将涵盖另一轮的Neat mixins，还说明了如何使用媒体查询和断点来调整网格以更改视口大小。 到时候那里见！

翻译自: https://webdesign.tutsplus.com/articles/6-essential-bourbon-neat-mixins--cms-24894