使用 Bourbon Neat 移动元素

Question

刚刚开始SASS/Bourbon/Neat。

我有 3 个项目，全部占用 3 列。我想将其中的 2 个移到右边，将 1 个移到左边。这是我正在使用的 sass/SCSS：

    #mod-header{
    background-color: $primaryColor;
    color: $primaryTextColor;

    header{
        @include outer-container();

        .social{
            @include shift(9);
            @include span-columns(3);
        }

        .contactDetails{
            @include shift(9);
            @include span-columns(3);
        }

        .dealerLogo{
            @include span-columns(3);
        }

    }
}

但这是我得到的结果：

https://jsfiddle.net/2qfm6dnd/

即。它将 .social 和 .contactDetails 降低了 .dealerLogo 的高度。请问我怎样才能阻止这种情况发生？

我知道答案可能很简单。

Answer 1

Neat 默认使用 12 列。所以如果第一个元素占了三个，你还剩下 9 个。根据您的描述，我认为这意味着您想要该行的四分之一，然后是第二个和第三个元素。如有不妥请指正

剩下那九列，最后两个元素将占据 6 列（每列 3 列）。 Neat shift mixin 通过添加 margin-left 来移动元素。因此，如果我们将第二个元素移动超过 3 列，则根本不需要移动第三个元素！

查看此演示：https://codepen.io/alexbea/pen/JbZVjV

如果您确实希望第二个元素 (.social) 位于最右侧的列中，而第三个元素 (.contactDetails) 在其下方，则需要移动 social超过 6 (3 + 6 + 3)。但是 Neat 包括行中除最后一个元素之外的所有元素的右边距。这就是 omega() mixin 进来的地方，删除它。这是一个令人困惑的问题，可能没有必要，所以我将 link it 并添加一个变体，在 Codepen 演示中显示它。

使用 Bourbon Neat 移动元素

Shifting elements using Bourbon Neat

sass

neat

bourbon