将波旁威士忌的整洁Mixins提升到新的水平

最新推荐文章于 2025-12-25 14:57:52 发布

翻译最新推荐文章于 2025-12-25 14:57:52 发布 · 285 阅读

文章标签：

#python #java #人工智能 #大数据 #面试

本文详细介绍了Bourbon Neat框架中的Mixins使用方法，包括新断点、方向上下文、显示上下文等功能，以及如何通过mixin管理响应式设计中的媒体查询，实现布局的灵活调整。

现在您已经掌握了基础知识，在第二篇有关Neat mixins的教程中，我将更深入地介绍，探索其他mixin并介绍一个功能。

我们将看以下内容：

功能

新断点

混合蛋白

重置布局方向
方向上下文
显示上下文
重置显示
填父母
重置所有
媒体
行

媒体

在过去的几年中，已经非常清楚了灵活的设计对屏幕尺寸和设备不断变化的格局做出响应的重要性。从这个意义上说，Bourbon Neat会为您提供支持，为您提供一种优雅的方法来管理网格的媒体查询。通过使用巧妙的针对性媒体查询，您的布局可以适应各种设备，而不会造成混乱。响应式设计将继续存在，负责任和可持续地使用媒体查询才是王道。

需要避免的是所谓的查询意大利面条 -混杂的媒体查询，很快就会变得难以维护。保持媒体查询的可管理性至关重要。这个mixin并不是完美的解毒剂，但是它确实鼓励使用DRY方法来理智地处理媒体查询，尤其是与new-breakpoint函数配合使用时。怎么，我听到你问？

您可以编写可以使用网格上下文的媒体查询块。假设您有两个元素，这些元素加起来最多为12列，这在_grid-settings文件中的$total-columns定义。这些元素分别在桌面大小屏幕上跨越3列和9列，这允许1088px宽的外部容器。对于较小的设备或视口，请让media [query] mixin知道12列的上下文需要更改为另一个大小，并相应地在该新上下文中调整响应元素的大小。繁荣！

哈姆：

.container
  %aside 3 col / 1 col
  %article 9 col / 2 col

萨斯：

body
  color: white
  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 
  +media(max-width 700px, 4)
    +span-columns(1)

article
  +span-columns(9)
  background-color: #e64a19
  +media(max-width 700px, 4)
    +span-columns(2)

在这里，我通过max-width 700px为media mixin提供了媒体功能，并为元素的$total-columns max-width提供了4列的新网格上下文。为700px大小最大为700px的aside和article元素建立了新的网格上下文之后，我只需要告诉元素现在在新的4列总数中可以跨越多少列。就我个人而言，我认为这很容易阅读且易于组织。一旦通过new-breakpoint函数重用了媒体上下文 （媒体查询/网格上下文）并将其保存到Sass变量中，它就会变得更酷。

注意：如果您仅使用像素值提供此混合，而没有任何特定的媒体功能：

萨斯：

.some-responsive-element
  +span-columns(8)
  +media(700px)
    +span-columns(4)

然后Neat将使用$default-feature ，它是min-width 。另外，提供网格上下文是可选的，默认为通过_grid-settings部分中的$total-columns 设置的值 。

新断点

您可能想知道我之前提到的几段DRY方法是什么，对吗？就是那种精神！

此便捷的自定义Sass功能是media蝙蝠侠的罗宾，使您不必一遍又一遍地重复自己。如果您想让您的媒体查询更具可读性和可重用性，那么我不认为您不会利用这种帮手来打击媒体查询犯罪。

足够的蝙蝠侠比喻。简而言之，此函数所做的全部工作就是通过变量保存媒体上下文（媒体查询/网格上下文），并使您有机会在所有media mixin中重用它们。那是一种有用的提取方法！让我们来看看。

萨斯：

$tablet: new-breakpoint(min-width 768px max-width 1024px 4)

.some-responsive-element
  +span-columns(3)
  +media($tablet)
    +span-columns(1)

.some-other-responsive-element
  +span-columns(9)
  +media($tablet)
    +span-columns(2)

超级可读！为了更加确保我们在同一页面上：在这里，您提供所需的所有媒体功能（但不提供逗号，冒号or ， and ），再加上新网格上下文的列数，然后将其保存到Sass变量中。剩下要做的就是为您的media mixins提供适当的变量，并进行DRY处理。

我希望您会喜欢这本书的内容简洁明了，并且可以轻松地针对各个断点调整布局，而且都集中在一个中央位置。如今，管理大量与布局相关的媒体查询可Swift使您与以前的自我陷入一场幻想之拳的日子已经一去不复返了。

行

我想花一些额外的时间来探索这个。如果您在设计中不经常使用表格（由于我们不应该再使用表格作布局用途的日子了，那么您可能不应该这样做），这可能很难立即进入。

基本

使用此混入有两个主要选项：带参数table或不带任何参数。

萨斯：

.some-row-element
  +row

当使用row无table的说法，一个clearfix添加和$display保持设定为默认值，即block 。实际上，这意味着在使用row的指定元素之后出现的所有内容都需要在单独的“行”上开始其自身的操作。

萨斯：

.some-table-row-element
  +row(table)

另一方面，您猜到了使用row(table)会使该行成为表布局的一部分。在幕后发生的事情是，这个混入集display: table和table-layout: fixed 。

您可以提供此Mixin的另一种选择。您可以传递一个参数（带有LTR或RTL $direction ）来更改该特定行的布局方向。

萨斯：

.some-row-element
  +row($direction: RTL)

但是，让我们从头开始。下面的虚拟示例包含16个<img>元素，其中前四个嵌套在使用row mixin的.row容器下。让我们看看如果不使用table参数，会发生什么情况。

哈姆：

.container

  .row
    %img
    %img
    %img
    %img
  
  %img
  %img
  %img
  %img
  
  %img
  %img
  %img
  %img
  
  %img
  %img
  %img
  %img

萨斯：

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

.row
  +row

img
  +span-columns(1)
  height: 60px
  margin-bottom: 5px
  background-color: #e64a19

如您所见，浏览器将前四个<img>元素视为一行的一部分，并将以下<img>元素放在单独的行中。 .row容器下面的元素没有绑定到特定的行，只要它们有可用空间，它们就向下浮动。

两个.row容器导致相同的把戏，彼此堆叠。

哈姆：

.container

  .row
    %img
    %img
    %img
    %img
  
  .row
    %img
    %img
    %img
    %img
  
  %img
  %img
  %img
  %img
  
  %img
  %img
  %img
  %img

我猜不是太棘手。尽管我不确定这会有用吗，但出于本能，我宁愿在这种情况下使用omega mixin。但是，看起来毫无用处的是在此处使用row(table) 。您将获得一列很长的列，该列将所有16个元素彼此堆叠。我会为您保留讨厌的屏幕截图，但如果您感到好奇，请查看Codepen示例。

在表上使用不带参数的行

到目前为止，我已经向您展示了此mixin的基本机制，尤其是如果您是游戏新手。现在我们正在接近有用的领域。让我们玩一个实际的表。

如果您以前没有看过表，建议您在继续操作之前启动Google。以下是一些需要刷新一些术语的人的生存指南。

这里我们有一个table元素。它包含一个thead标签，该标签具有一行以通过th标签显示各种列标题。在下面，您将找到tbody ，它通过td标签存储每个表行（ tr ）的实际数据。

哈姆：

.container

  %table
  
    %thead
      %tr
        %th Username
        %th User_ID
        %th Favorite Pizza
        %th Pet
        %th Pet Name
        %th Favorite Game
    
    %tbody
      %tr
        %td Joe
        %td 112233
        %td Pepperoni
        %td Cat
        %td Gordon
        %td Splinter Cell
      %tr
        %td Jane
        %td 223311
        %td Mushrooms
        %td Dog
        %td Fluffy
        %td Metal Gear Solid V
      %tr
        %td Bob
        %td 331122
        %td Onions
        %td Fish
        %td Sharky
        %td Little Big Planet 2

萨斯：

body
  color: white
  background-color: white

.container
  +outer-container
  background-color: darken(#f5f5f5, 50%)

tr
  +row()
  text-align: center
  
th
  padding:
    top: 10px
    bottom: 20px
  
td
  height: 50px
  background: #81d4fa
  padding-top: 2px

这会导致不均匀的，令人讨厌的表Blob，该Blob的范围只能达到这些表数据单元中的内容。如果您想使用一堆CSS规则来手动整理此问题，显然不是超级有用，而且很麻烦。

使用行（表）

对此应该有一个简单的解决方案吗？添加table作为参数并display: table和table-layout: fixed ！更不用说引擎盖下的fill-parent一点点了。

萨斯：

tr
  +row(table)
  text-align: center

注意：这样的固定表布局不仅具有更快地布局表的优点，而且列的宽度也不取决于表单元格的内容。您将获得均匀分布的行，这些行跨表容器的宽度。删除一个表数据单元格（ td ），您会看到其他元素将行中的空间平均划分：

无排

让我们以一个显示表的默认行为的示例结束，而该示例完全不使用row混合。

萨斯：

body
  color: white
  background-color: white

.container
  +outer-container
  background-color: darken(#f5f5f5, 50%)

tr
  text-align: center
  
th
  padding:
    top: 10px
    bottom: 20px
  
td
  height: 50px
  background: #81d4fa
  padding-top: 2px

如您所见，单元格间隔均匀，但没有使用所有可用的适当空间。他们将自己定位为每列最长的内容，并调整其单元格以使其沿这些线对齐。

对row过于冗长表示歉意，但我希望本节对表和行带来的任何麻烦都可以减轻一些麻烦。

填父母

接下来，如果您希望元素通过跨越相同数量的列来快速填充其父元素，那么Neat提供了一个简单的解决方案。您不必提供任何参数。这个mixin没什么花哨的，但是在处理媒体查询或表时可能会派上用场。

注意：使用span-columns(12)而不是fill-parent来跨越外部容器的整个宽度不是正确的方法—只会增加不必要的负担。

哈姆：

.container
  %aside Aside 3 columns | fill-parent
  %article Article 5 columns | fill-parent

萨斯：

body
  color: white
  background-color: white

.container
  +outer-container
  margin-top: 10px
  background-color: #f5f5f5

aside, article
  margin-bottom: 5px
  height: 200px  

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

article
  +span-columns(5)
  +fill-parent
  background-color: #e64a19

请记住，使用fill-parent元素的元素会忽略同一行中的其他元素，并旨在跨越fill-parent元素的整个宽度而不考虑其邻居。我想这很简单，让我们继续吧！

方向上下文

Neat网格中的每个元素都有一个$default-layout-direction ，该$default-layout-direction在settings / _grid.scss中设置为LTR （从左到右）。这意味着在幕后，Neat始终使用left-to-right的direction-context 。

在引擎盖下，此mixin只会改变所应用元素的浮动方向。什么是整齐的是，一些方向性的背景下，假设left-to-right ，你可以收集一堆格子元素和改变自己的方向right-to-left一次-all，下一个代码块。同样，此解决方案使您自己的事情更紧凑，更易读，并且对于不熟悉某个项目的人更容易理解。

哈姆：

.container
  %aside 3 columns
  %article 9 columns

萨斯：

body
  color: white
  background-color: white

.container
  +outer-container
  margin-top: 10px
  background-color: #f5f5f5

aside, article
  margin-bottom: 5px
  height: 200px  

+direction-context(right-to-left)
  aside
    +span-columns(3)
    background-color: #81d4fa

  article
    +span-columns(9)
    background-color: #e64a19

这是没有 direction-context相同演示：

这是另一个例子。现在没有什么新鲜的，只是列的大小相等，并且right-to-left流动。

哈姆：

.container
  %aside 3 columns
  %article 3 columns

萨斯：

body
  color: white
  background-color: white

.container
  +outer-container
  margin-top: 10px
  background-color: #f5f5f5

aside, article
  margin-bottom: 5px
  height: 200px  

+direction-context(right-to-left)
  aside
    +span-columns(3)
    background-color: #81d4fa

  article
    +span-columns(3)
    background-color: #e64a19

接下来的一些细微调整仅使这三个列元素之一使用mixin，因此它们浮动到容器的相对侧。没什么太神奇的了，但这在您的招数中可能很方便。

萨斯：

body
  color: white
  background-color: white

.container
  +outer-container
  margin-top: 10px
  background-color: #f5f5f5

aside, article
  margin-bottom: 5px
  height: 200px  

  
aside
  +span-columns(3)
  background-color: #81d4fa
  
+direction-context(right-to-left)
  article
    +span-columns(3)
    background-color: #e64a19

最后一英里

为了完整起见，本教程的最后一部分涵盖了几个mixin，但我个人试图避免这样做，因为它们并不总是给我期望的结果。如果您有更好的使用经验，请告诉我。除此之外，其中三个将很快被弃用：

reset-display
reset-layout-direction
reset-all

重置布局方向

关于这一点，没有太多要说的。假设您出于任何原因更改了布局方向，并想切换回$default-layout-direction （ left-to-right ）？到这里，恢复默认上下文！无需争论。

萨斯：

.row
  +row($direction: RTL)

.row 
  reset-layout-direction

什么时候有用？好问题！该文档主要说明何时需要单行更改方向。我个人不会太在意。首先，它已被弃用，而推荐使用direction混合，而且当我想使其与媒体查询一起使用时，它还给我带来了令人惊讶的头痛。

显示上下文

要创建一个代码块来更改其内部mixin使用的显示属性，您可以将两个选项传递给该mixin： block和table 。第一个很明显， table添加了display: table-cell为您服务。 table-cell强制元素的行为类似于td元素。

萨斯：

+display-context(table)
  .some-cell
    +span-columns(2)

重置显示

假设您已将活动显示更改为table ，如上例所示， reset-display帮助您轻松切换回block 。也没有任何论据。该文档说，如果将其应用于更改了显示值的单个行，这将非常有用。

萨斯：

.row
  +row(table)
  
.row 
  +reset-display

重置所有

如果您想一口气地将reset-display和reset-layout-direction结合在一起，那将是使用reset-all -不需要reset-all参数。假设在某行上，您将显示更改为table ，将$default-layout-direction更改为RTL然后又要切换回去。

萨斯：

.row
  +row(table, RTL)
  
.row 
  +reset-all

最后的想法

好吧，那是很长的。感谢您的尝试，希望您发现这是进入Neat mixin领域的有趣旅程。不过，还有一件事需要讨论。也就是说，您可以根据自己的需要调整框架的所有变量。下一个教程是一个简短的教程，但总结了我们对Neat的介绍。到时候那里见！

翻译自: https://webdesign.tutsplus.com/articles/taking-bourbon-neat-mixins-to-the-next-level--cms-24952