使用基础网格混合添加空间 - sass

Question

我正在尝试使用 sass 和基础网格制作导航栏。我在导航栏中有链接，但我不希望它们每个都是@include grid-column(4);，而是我希望它们每个是 3 列，然后在右端有 3 列的空白空间。这将是类似的东西： （电子邮件选项卡当前悬停）

如何使用 Foundation Grid Sass Mixins 在此处添加空间。

Answer 1

我通过将之前的 @include grid-column(4); 中的每个 id 更改为 @include grid-column(3); 来解决此问题。我相信这很有效，因为它们是连续的，并且向下的下一列大于 3，因此它不会自动跳转到上方的导航栏，而是位于其下方。

我的 mixin 布局如下：

    header {
          @include grid-row;
         }
    h1 {
          @include grid-column(9);
    }
    .login{
       @include grid-column(3);
    } 
    nav {
          @include grid-column(12);
        } 
  #games {
          @include grid-column(3);
       }
    #email {
          @include grid-column(3);
       }
    #archive {
          @include grid-column(3);
       }
    .breadcrumbs {
       @include grid-column(12);
    }
    nav a {
}