让语义网格 scss 基础 4 工作答案

【问题标题】：Getting Semantic Grids scss foundation 4 to work让语义网格 scss 基础 4 工作
【发布时间】：2013-03-22 13:37:25
【问题描述】：

我有 3 个部分在默认断点下折叠但我不知道如何使用 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);
}

}

【问题讨论】：

CSS 中的类与 HTML 中使用的类不匹配。
对不起，我没有解释清楚。 HTML 是在基础 4 中运行良好的默认标记，但是当我尝试在 html 标记中使用自己的 css 时，div 没有折叠。我只是展示了对 html 默认标记有效的方法。我已经编辑了该部分，希望能使其更清晰。 @cimmanon

标签： responsive-design sass zurb-foundation

【解决方案1】：

改用@extend。

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

我制作了几个运行良好的 mixin，我认为这样会更容易： https://gist.github.com/jofralogo/5324278

【讨论】：

【解决方案2】：

这是因为您为网格行编写的 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);
    }
}

【讨论】：

我不太明白你的答案（说不使用@extend）和下面jofralogo的答案（使用@extend）之间谁是正确的。
如果您打算使用内置于 mixins 中的基础，我的回答是正确的。 Foundation 创建了 mixin grid-row() 而不是我...因此，如果您打算使用 mixin SASS 语法说键入 @include，extend 将不会运行 grid-row，因为您无法扩展 mixin。但是您可以扩展一个类，即 .row 现在说扩展是错误的有点苛刻，但不打算这样做会更正确。如果你想要语义网格，Foundation 打算让你使用 mixins。如果你想在类名中硬编码或扩展类，你可以这样做，但是当你有很好的 mixin 和断点时你为什么要这样做。

【解决方案3】：

我对此感到困惑，但后来发现这实际上是预期的行为。这是official Foundation grid documentation的引述：

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

【讨论】：