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;
}

有关SASS的扩展功能，请参阅http://sass-lang.com/guide。

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网格列定义以供重用

2 个答案: