使语义网格scss foundation 4正常工作

Question

我有三个部分在默认断点下折叠，但我不知道如何使用scss使用我自己的css来折叠它。

工作正常且可折叠的默认基础轴网

    <div class="row">
  <div class="large-4 columns">...</div>
  <div class="large-4 columns">...</div>
  <div class="large-4 columns">...</div>
</div>

我在下面试了试，但它似乎不会崩溃

<div class="container">
  <div class="div1">...</div>
  <div class="div2">...</div>
  <div class="div3">...</div>
</div>

.container{
@include grid-row;

.div1 {
    @include grid-column(4);
}
.div2 {
    @include grid-column(4);
}
.div3 {
    @include grid-column(4);
}

}

Answer 1

这是因为您为grid-row编写的SCSS是错误的。

    @include grid-row();

不要使用@extend。这不是foundation4的用法……@extend只是将你的样式填充到.row和.column中，这不是你想要做的，相反，你想使用语义代码以相反的方式将这些样式加入到你的样式中，因此你可以稍后在你的SCSS中更改代码，然后它会更新。

以下是正确答案：

HTML

<div class="container">
  <div class="div1">...</div>
  <div class="div2">...</div>
  <div class="div3">...</div>
</div>

SCSS

.container{
@include grid-row();

.div1, .div2, .div3 {
    @include grid-column(12);

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

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

}

注意:这是基础5。您必须创建断点。如果你想在移动端或者任何你想要的地方折叠整个视图，你的移动端断点应该有12列。这与

<div class="small-12 columns"> </div>

如果你想要4列中及以上，你可以这样写：

<div class="small-12 medium-4 columns"> </div>

因此，要在不使用帮助器类的情况下以系统方式编写代码，您可以编写以下代码：

<div class="myclassname"> </div>

SCSS代码是：

.myclassname {
    @include grid-column(12);

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

Answer 2

我对此感到困惑，但后来发现这实际上是故意的行为。以下是official Foundation grid documentation的一句话：

我们将媒体查询排除在网格混合的代码之外。这将使您能够将mixins包含在您想要的任何断点内，使您处于完全控制之下。如果您想创建10个断点并在每个断点之间移动布局，请务必这样做。如果你只想使用默认的断点，我们为你提供了相应的变量。

Answer 3

请改用@extend。

    .container{
        @extend .grid;
        div{
            @extend .columns;
        }
    }
    .div1 {
        @extend .large-4;
    }
    .div2 {
        @extend .large-4;
    }
    .div3 {
        @extend .large-4;
    }

我做了几个工作得很好的mixins，我认为这让它变得更容易：https://gist.github.com/jofralogo/5324278