css - 你能在 Zurb Foundation 的同一个 css 标签中定义一个行和一个列的 mixin 吗？

Question

我正在使用 Zurb Foundation 4 mixins，我想知道如果将行和列放在同一个 css 标记中会发生什么？

header {
          @include grid-row;
          @include grid-column(9);
          }
h1  {
          }

而不是做类似的事情：

header {
          @include grid-row;
          }
h1  {
          @include grid-column(9);
          }

提前致谢。

Answer 1

如果您将行和列放在同一个 css 选择器中，实际上您将省略.rowor @include grid-row（这意味着@include grid-column(9)属性将覆盖@include grid-row属性）：

header { @include grid-row; @include grid-column(9); }

等于：

header { @include grid-column(9); }

所以你的列会根据屏幕大小浮动。

当您使用.rowor@include grid-row作为单独的标签时，它会使列根据$row-width大小站在页面的中心。

看看这两个例子有两个不同的代码：

示例 1：

header {
    @include grid-row;
    @include grid-column(9);
}

示例 1 输出为：

示例 2：

#header {
    @include grid-row;
    h1 {
        @include grid-column(9);
    }
    h2 {
        @include grid-column(3);
    }
}

示例 2 输出为：