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

【问题标题】：Can you define a row and a column mixin in the same css tag in Zurb Foundation?你能在 Zurb Foundation 的同一个 css 标签中定义一个行和一个列的 mixin 吗？
【发布时间】：2013-11-14 20:31:56
【问题描述】：

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

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

而不是做类似的事情：

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

提前致谢。

【问题讨论】：

标签： css zurb-foundation mixins

【解决方案1】：

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

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

等于：

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

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

当您使用.row 或@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 输出为：

【讨论】：

感谢您的回复，但我不明白您在说什么。你能把它改一下更有意义吗？