Question

我正试着绕过苏西。我想我会喜欢它。只需要更多地使用它。我基本上试图创建可以在整个站点中使用的可重用列。我来自使用基金会网格，所以也许我没有考虑这个问题？

我需要能够定位这些列。我读过一些文章说我们不应该用像column-2或small-6这样的类来填充我们的div。如果我不告诉它我的期望，我想我不会看到你如何瞄准div。

下面的代码有效，但它是非常可疑吗？这是正确的方法吗？我必须为所有12个列宽创建类似的规则。我必须事先决定我希望这些列如何破坏。我是否希望跨度6列跨越6直到中等，或者它们是否应该更改为跨度12.这些规则必须事先确定。

如果这是正确的方法。任何帮助，指导或指示表示赞赏。

HTML

<div class="row">
    <div class="column-6">
        <div class="column-2"></div>
        <div class="column-2"></div>
        <div class="column-2"></div>
        <div class="column-2"></div>
        <div class="column-2"></div>
        <div class="column-2"></div>
    </div>
    <div class="large-6">
        <!-- Large image goes here -->
    </div>
</div>

SUSY SASS

$susy: (
    columns: 12,
    gutters: 1/4,
    container: 64em,
    global-box-sizing: border-box,
 );

$medium: 30em;
$large: 64em;

.column-2 {
    @include span(12 last);

    @include breakpoint($medium) {
        @include span(6);
        &:nth-child(2n) {
            @include last;
        }
    }

    @include breakpoint($large) {
            @include span(2);
            &:nth-child(2n) {
                @include span(2);
            }
        &:last-child {
          @include last;
        }
    }
}

.column-6 {
    @include span(12 last);

    @include breakpoint($medium) {
        @include span(12);
        &:nth-child(2n) {
            @include last;
        }
    }
}

Answer 1

你有正确的想法。 Susy与Foundation和Bootstrap的不同之处在于我们在Sass中声明了响应，而不是像“large-3 pull”那样用类填充html。

我通常将我的类命名为“column-6”更像“main-content”。除此之外，它看起来是正确的方法。

@include span(12 last);

你真的不需要在这里指定，因为它跨越了整个宽度。

@include full;

可能更合适，或者只是

@include span();

默认为您在设置中定义的列。

Susy可重复使用的响应列

1 个答案: