0

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

我需要能够定位这些列。我读过一些文章说我们不应该用 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: (
    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;
        }
    }
}
4

1 回答 1

0

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

我通常将我的课程命名为比“第 6 列”更有意义的名称，例如“主要内容”。除此之外，它看起来是正确的方法。

@include span(12 last);

您实际上不需要在此处指定 last ，因为它跨越了整个宽度。

@include full;

可能会更合适，或者只是

@include span();

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

于 2014-12-18T03:36:05.650 回答