html - 结合 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 方法来定义可以在我的应用程序中重复使用的类？

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

<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，您可以使用“扩展”功能将您的类合并为一个。所以，你可以这样做:

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

参见 http://sass-lang.com/guide用于 SASS 的扩展功能。