合并 Foundation css 网格列定义以供重用

Question

在 Foundation CSS 中，您可以像这样设置布局中的列大小：

<div class="row">
  <div class="bordered small-12 medium-6 large-4 columns">one</div>
  <div class="bordered small-12 medium-6 large-4 columns">two</div>
  <div class="bordered small-12 medium-6 large-4 columns">three</div>
</div>

我想在许多不同的地方使用小号、中号和大号的特定组合。是否有一种 SASS/CSS 方法来定义可以在我的整个应用程序中重复使用的 class？

我希望上面的代码看起来像这样：

<div class="row">
  <div class="bordered default-size columns">one</div>
  <div class="bordered default-size columns">two</div>
  <div class="bordered default-size columns">three</div>
</div>

谢谢！

Answer 1

使用 SASS，您可以使用 "extend" 功能将您的类合二为一。所以，你可以这样做：

.default-size {
  @extend .small-12;
  @extend .medium-6;
  @extend .large-4;
}

请参阅 http://sass-lang.com/guide 了解 SASS 的扩展功能。

Answer 2

使用 Foundation 的 SASS mixins 这是可能的：

HTML

<div class="triple">
  <div>one</div>
  <div>two</div>
  <div>three</div>
</div>

SASS

.triple {
  @include grid-row();

  > div {
    @include grid-column(12);

    @media #{$large-up} { 
      @include grid-column(4); 
    }
  }

}

以上将导致在小断点处有 3 列堆叠，在大断点处有 3 列并排。您可以重构 HTML 标记以删除 bordered 和 default-size 类以及在此设置中，而是将任何需要的样式添加到 > div 选择器。

合并 Foundation css 网格列定义以供重用

combine Foundation css grid column definitions for reuse

html

css

sass

zurb-foundation