2

我的 Foundation 6 scss 代码有问题，需要帮助。我正在尝试使用 Sass mixins 创建以下代码。

<div class="row small-collapse medium-uncollapse large-collapse">
<div class="small-3 medium-6 large-3 columns bg-clip" style="background-color:yellow">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
</div>
<div class="small-3 medium-6 large-3 columns bg-clip" style="background-color:blue">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>

所以我有 HTML

<style>
  .bg-clip {
    background-clip:content-box;
  }
</style>

<div class="box-wrap">
  <div class="box bg-clip" style="background-color:yellow">sass grid</div>
  <div class="box bg-clip" style="background-color:blue">sass grid</div>
</div>

和scss

.box-wrap {
  @include grid-row;
  .box {
    @include breakpoint(small) {
      @include grid-column(3);
      @include grid-column-collapse;
    }
    @include breakpoint(medium) {
      @include grid-column(6);
      @include grid-column-uncollapse(30);
    }
    @include breakpoint(large) {
      @include grid-column(3);
      @include grid-column-collapse;
    }
  }

}

一切都按预期工作，但在断点（大） grid-column-collapse 将无法工作......

感谢您的时间

4

0 回答 0