Responsive design 语义网格SCSS基金会4工作

我有3个部分在默认断点下折叠 但是我不知道如何使用我自己的css使用scss使它崩溃

默认基础网格，工作良好，塌陷

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

...
...
...
.集装箱{
@包括网格行；
.1分部{
@包括网格柱（4）；
}
.第2分部{
@包括网格柱（4）；
}
.第3分部{
@包括网格柱（4）；
}

}

改用@extend

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

我制作了两个效果很好的混音器，我认为这样做更容易：

---

这是因为您为网格行编写的SCS错误

    @include grid-row();

不要使用@extend。这不是基金会4的用途@extend只是将样式填充到.row和.column中，而这不是您想要做的，相反，您希望使用语义代码以相反的方式将这些样式粘贴到样式中，因此您可以稍后在SCS中更改代码并更新

以下是正确答案：

HTML

}

注：这是基础5。必须创建断点。如果希望整个视图在mobile中折叠，或者希望其他任何方式折叠，则移动断点应该有12列。这和

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

---

我对此感到困惑，但后来发现这实际上是故意的行为。以下是一段引用自：

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

---

CSS中的类与HTML中使用的类不匹配。很抱歉，我没有解释清楚。HTML是默认的标记，它在基础4中工作得很好，但是当我尝试在HTML标记中有自己的CSS时，div不会崩溃。我只是展示了html默认标记的工作原理。我编辑了这一部分，希望能让它更清楚@cimmanonI不太明白你的答案（说不要使用@extend）和下面jofralogo的答案（使用@extend）之间谁的答案是正确的。如果你计划使用内置混合器的基础，我的答案是正确的。基金会创建了MIXIN GRIDROWORD（）而不是我…所以，如果您计划使用mixin，SASS语法说键入@includextend将不会运行grid行，因为您无法扩展mixin。但你们可以扩展一个类，也就是说，.row现在说扩展是错误的，这有点苛刻，但并不是有意的，它会更正确。基金会希望你使用混音，如果你想要SyMod网格。如果您想硬编码类名或扩展类，您可以这样做，但当您有很好的混合和断点时，为什么要这样做呢。

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

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

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

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

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

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