2

I have 3 sections that collapse under the default breakpoint but I do not know how to get it to collapse with my own css using scss.

default foundation grid that works well and collapses

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

I tried below out but but it doesn't seem to collapse

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

}

4

3 回答 3

2

这是因为您正在为 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);
    }
}
于 2013-04-16T16:42:07.747 回答
0

我对此感到困惑，但后来发现这实际上是预期的行为。这是来自官方 Foundation 网格文档的引用：

我们将媒体查询排除在网格混合的代码之外。这将使您能够将 mixin 包含在您想要的任何断点中，让您完全控制。如果你想创建 10 个断点并在每个断点之间移动布局，无论如何。如果您只想使用默认断点，我们有相应的变量。

于 2013-09-27T11:49:26.377 回答
-1

请改用@extend。

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

我做了几个运行良好的混合，我认为这让它更容易： https ://gist.github.com/jofralogo/5324278

于 2013-04-06T02:31:20.097 回答