0

私はスージーに頭を抱えようとしています。私はそれが好きになると思います。もっと操作する必要があります。私は基本的に、サイト全体で使用できる再利用可能な列を作成しようとしています。私は Foundation グリッドを使用しているので、これについて考えていないのではないでしょうか?

それらの列をターゲットにできる必要があります。column-2 や small-6 のようなクラスで div を埋めるべきではないという記事をいくつか読みました。私が期待していることを伝えないと、divをどのようにターゲットにしているのかわからないと思います。

以下のコードは機能しますが、非常に Susy ですか? それは正しいアプローチですか？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 とは異なり、"large-3 pull.." のようなクラスで html を埋めるのではなく、Sass で応答性を宣言します。

私は通常、「main-content」のような「column-6」よりも意味のある名前をクラスに付けます。それ以外は、正しいアプローチのように見えます。

@include span(12 last);

last は全幅にわたるため、ここで指定する必要はありません。

@include full;

おそらくより適切であるか、または単に

@include span();

設定で定義された列にデフォルト設定されます。

于 2014-12-18T03:36:05.650 に答える