6种必不可少的波旁威士忌整洁Mixins

daique1908

墨衍会员 · AI 创作全网分发码龄10年

关注

翻译最新推荐文章于 2026-11-14 20:32:26 发布 316 阅读 AI 写同款· GEO 优化 ›

本教程旨在使您入门。为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

萨斯：

body
  background-color: white

.container
  +outer-container
  background-color: #f5f5f5

aside, article
  padding: 10px
  margin-bottom: 20px
  height: 100px

aside
  +span-columns(3)
  background-color: #81d4fa 

article
  +span-columns(9)
  +omega
  background-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

萨斯：

body
  color: white
  background-color: white

.container 
  +outer-container
  background-color: #f5f5f5

aside, article
  padding: 10px
  margin-bottom: 20px
  height: 100px

article
  background-color: #e64a19

aside
  background-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

萨斯：

body
  color: white
  background-color: white

.container
  +outer-container
  background-color: #f5f5f5
  padding:
    top: 15px
    bottom: 15px

aside, article
  padding: 10px
  margin-bottom: 20px
  height: 100px

article
  background-color: #e64a19

aside
  background-color: #81d4fa

.first, .second
  height: 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

萨斯：

body
  color: white
  background-color: white

.container
  +outer-container
  background-color: #f5f5f5

.first, .second, .third, .fourth, .fifth, .sixth
  background-color: #81d4fa
  padding: 10px
  height: 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

萨斯：

body
  color: white
  background-color: white

.container
  +outer-container
  background-color: #f5f5f5

.first, .second, .third, .fourth, .fifth, .sixth
  background-color: #81d4fa
  padding: 10px
  height: 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

萨斯：

body
  color: white
  background-color: white

.container
  +outer-container
  background-color: #f5f5f5

img
  +span-columns(2)
  +omega(6n)
  height: 200px
  margin-bottom: 5px
  background-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

标签

#java #python #html #css #servlet

6种必不可少的波旁威士忌整洁Mixins

外容器

跨栏

嵌套列

欧米茄

注意！

转移

上下文转移

垫

结论

相关推荐