sass - Bourbon - 整洁 - 交替左/右 - 右/左列 - 相同的 DOM 结构

Question

我最近开始研究 Bourbon 和 Neat 以在我的个人网站上使用，并可能用于未来的项目。

我正在尝试重新创建从左到右、从右到左的交替布局。与此类似：http ://www.plunkettassociates.co.uk/services/

其中有 48% 的列包含文本，然后是 48% 的列包含图像。然后，此布局在页面下方左右交替。关键是 DOM 结构是相同的。CSS 用于控制 48% 列的位置和边距。

有人可以解释如何使用整洁来实现这种交替布局吗？

Answer 1

如果您想使用 Bourbon/Neat 来模拟此布局。你必须知道一些事情：

• 某行有一个容器，在你分享的url中，__标签有这个作用。
• 两列，您可以使用整洁的主题来响应它。在示例中col-1-2类标签。

Neat 为此提供了一些两个 mixin。外部容器和跨度列：

例如，您可以通过以下代码进行模拟：

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
</div>

Sass 代码，使用 Neat。假设您的页面中有 12 列：

.row {
   @include outer-container;
}

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

最后，对图像的效果很简单，只需要一个负值的边距。在示例中是一个 -80px 的 margin-top：

问候。